css给表格添加滚动条
时间: 2023-10-20 18:17:08 浏览: 41
在CSS中,可以使用overflow属性为表格添加滚动条。具体操作如下:
1. 将表格包裹在一个div中,并设置div的宽度和高度,超出部分将自动出现滚动条。
```
<div class="table-container">
<table>
<!-- 表格内容 -->
</table>
</div>
```
2. 在CSS中为div设置overflow属性,并将其设为auto或scroll。
```
.table-container {
width: 500px;
height: 300px;
overflow: auto;
}
```
auto表示当表格内容超出div的尺寸时才会出现滚动条,而scroll则表示无论表格内容是否超出div的尺寸,都会出现滚动条。
完整的示例代码如下:
```
<style>
.table-container {
width: 500px;
height: 300px;
overflow: auto;
}
</style>
<div class="table-container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>27</td>
<td>女</td>
</tr>
<!-- 表格内容省略 -->
</tbody>
</table>
</div>
```