如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
html/css当列数太多时,如何让table出现滚动条
很多时候我们的表格的列数会很多,然后由于没有横向滚动条,然后浏览器窗体宽度又只有这么大,从而导致每个单元格的数据只能向下挤压。或者,超出宽度的列数据直接消失,又或者整个窗体出现了滚动条,界面显得非常难看。。。
所以我们必须想一个办法让table在数据列太多时显示横向滚动条!
工具/原料
- 一台电脑/一个浏览器
方法/步骤
先来看下一个初始的table代码:
html>
head>
meta charset="utf-8">
style>
/style>
/head>
body>
table border="1">
tbody>
tr>
td>111111111111111111111/td>
td>222222222222222222222/td>
td>333333333333333333333/td>
td>444444444444444444444/td>
td>555555555555555555555/td>
td>666666666666666666666/td>
td>7777777777777777777777/td>
td>111111111111111111111/td>
td>222222222222222222222/td>
td>333333333333333333333/td>
td>444444444444444444444/td>
td>555555555555555555555/td>
td>666666666666666666666/td>
td>7777777777777777777777/td>
td>8888888888888888888888/td>
td>9999999999999999999999/td>
td>1111111111111111111111/td>
/tr>
/tbody>
/table>
/body>
/html>
运行示意图如下所示,就显示了一个只含有一行但是含有很多列的table,这时由于
那么这个时候我们又该如何修改代码让这个table显示出滚动条呢?(至少看起来是)
其实并不复杂,首先我们在这个table的外面加一个div把table包含起来,如下图所示
然后我们在给这个div设置样式【overflow:scroll;】
注意:
这个属性表示让div出现滚动条.如果只想出现水平滚动条或者只想出现垂直滚动条的话,请用overflow-x(水平)与overflow-y(垂直).
运行结果如下,这个table出出现了滚动条,并且窗体的导航条没有在出现。
【
注意:
1. 如果你在你的项目中这样操作了后却没出现滚动条,但是偏偏又能滚动!
2. 那估计是你的div没有具体的宽度与高度,从而被里面的table给撑开了,这样来给table有多宽有多高,你的div就有多宽多高,自然就不会出现滚动条,
3. 所以你的div设置下具体的宽高即可解决这个问题
】
总结下原理:
就像我们最开始构建了一个很多列的table,然后浏览器窗体(body)出现了滚动条一样,这是因为table的父元素就是body.
而现在我们把这个body父元素换为了我们自己定义的div而已,这就是我的实现原理。
扩展
当出现了滚动条后实际上我们还可以通过控制这个div的样式来控制这个界面的展现。
我举个例子,比如我设置了这个div的宽度为500px,如下图所示,这样看起来是不是好多了,当然除此之外我们还可以设置各种的样式,这个就看大家自己的需求了
注意事项
- 在table本身上设置overflow:scroll;样式是无效的,
- 如果您觉得我的经验稍微有点作用的话,请给我投下票,当然如果有疑惑欢迎给我留言,我会持续答复的o(^▽^)o
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 438 HTML