最近在写一个项目的时候输出的结果有点多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
微信扫一扫 
支付宝扫一扫