用原生h5写一个table表格,并且实现table表格内容可以滚轮滑动的效果
时间: 2024-04-14 22:30:34 浏览: 90
实现表格动态滚动效果
要实现带滚动效果的表格,你可以使用HTML5的`<table>`元素结合CSS的样式和属性来实现。下面是一个示例代码:
```html
<style>
.table-container {
width: 300px;
height: 200px;
overflow: auto;
}
</style>
<div class="table-container">
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容 1</td>
<td>内容 2</td>
<td>内容 3</td>
</tr>
<!-- 添加更多行 -->
<tr>
<td>更多内容 1</td>
<td>更多内容 2</td>
<td>更多内容 3</td>
</tr>
</tbody>
</table>
</div>
```
在上述代码中,我们使用了一个包裹表格的容器 `<div class="table-container">`,设置了固定的宽度和高度,并将其 `overflow` 属性设置为 `auto`,这样当表格内容超出容器的大小时,会出现滚动条。
你可以根据实际需求修改容器的宽度和高度,以及表格的内容和样式。
阅读全文