最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下:
1、方法分析:
要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。
2、html代码:
<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>
3、效果截图:
以上就是125建站网为大家介绍的关于HTML如何给table添加滚动条的方法,了解更多相关文章请关注125建站网!
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/11796.html