发布时间:2020-04-05 11:27:02 作者:佚名 阅读:(129)
最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来吾爱编程为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下:
要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。
<div style="width:400px; height:220px; overflow:scroll;"> <table class="tableBasic" width="100%" cellspacing="0" cellpadding="8" border="1"> <tbody> <tr> <th width="60" align="center">日期</th> <th width="60" align="center">项目1</th> <th width="60" align="center">项目2</th> <th width="60" align="center">项目3</th> <th width="60" align="center">项目4</th> <th width="60" align="center">项目5</th> <th width="70" align="center">项目6</th> </tr> <tr> <td align="center">2020-04-03</td> <td align="center">25681</td> <td align="center">4137</td> <td align="center">5367</td> <td align="center">1599</td> <td align="center">318</td> <td align="center">129</td> </tr> <tr> <td align="center">2020-04-02</td> <td align="center">65347</td> <td align="center">10616</td> <td align="center">13573</td> <td align="center">4717</td> <td align="center">634</td> <td align="center">25681</td> </tr> <tr> <td align="center">2020-04-01</td> <td align="center">62191</td> <td align="center">10227</td> <td align="center">13741</td> <td align="center">25681</td> <td align="center">651</td> <td align="center">344</td> </tr> <tr> <td align="center">2020-03-31</td> <td align="center">65471</td> <td align="center">12421</td> <td align="center">14477</td> <td align="center">4589</td> <td align="center">25681</td> <td align="center">336</td> </tr> </tbody> </table> </div>
以上就是吾爱编程为大家介绍的关于HTML如何给table添加滚动条的方法,了解更多相关文章请关注吾爱编程网!
欢迎分享转载→ HTML如何给table添加滚动条
© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们 - 意见反馈