写一段带有滚动条的表格的html
时间: 2023-12-10 08:36:58 浏览: 26
以下是一个带有滚动条的表格的 HTML 代码示例:
```html
<div style="overflow-x: auto;">
<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>28</td>
<td>女</td>
</tr>
<tr>
<td>赵六</td>
<td>32</td>
<td>男</td>
</tr>
<tr>
<td>钱七</td>
<td>27</td>
<td>女</td>
</tr>
<tr>
<td>孙八</td>
<td>29</td>
<td>男</td>
</tr>
<tr>
<td>周九</td>
<td>31</td>
<td>女</td>
</tr>
<tr>
<td>吴十</td>
<td>26</td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
```
在上面的代码中,我们使用了 `div` 元素来包裹表格,并设置了 `overflow-x: auto;` 属性,这样当表格的宽度超出 `div` 元素的宽度时,会自动出现横向滚动条。同时,我们也可以设置 `overflow-y: auto;` 属性来实现纵向滚动条。
在表格中,我们采用了标准的 HTML 表格结构,使用了 `thead` 和 `tbody` 元素来分别表示表格的表头和表身。在表头中,我们定义了三个表头单元格,分别表示姓名、年龄和性别。在表身中,我们定义了多个数据行,每行包含三列数据,分别是对应人员的姓名、年龄和性别。