HTML如何给table添加滚动条

最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来吾爱编程为大家介绍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、效果截图：