您的位置：首页 > Web前端 > JavaScript

html/jsp 中table标签如何添加横向滚动条

2018-03-13 21:41 357 查看

有时候table标签会有很多列，这样会把列的宽度压缩，变的非常不美观，也不好浏览，列入这样

<body>
<table border="1" width="600px" height="120px" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>杨争</td>
<td>25</td>
<td>男</td>
</tr>
</table>这时我们需要在下面添加一个横向滚动条来方便浏览

该如何实现呢，我们用一个div标签把table标签包裹起来，设置属性style="overflow-x:scroll"，并把table标签的宽度属性设为3000px 就可以了，代码如下：<body>
<div style="overflow: auto; width: 100%;">
<table border="1" width="3000px" height="120px" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>杨争</td>
<td>25</td>
<td>男</td>
</tr>
</table>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航