h5 table表头不滚动
时间: 2023-10-07 14:10:21 浏览: 46
如果你想让表格的表头固定不滚动,可以通过设置 CSS 样式来实现。具体步骤如下:
1. 将表格包裹在一个容器元素内,例如一个 div 元素。
2. 设置这个容器元素的样式为 `overflow: auto`,这样当表格内容超出容器高度时,容器会自动出现滚动条。
3. 将表格的表头部分放在一个 `thead` 元素内,并设置其样式为 `position: sticky` 和 `top: 0`,这样表头就会固定在容器顶部。
示例代码如下:
HTML:
```html
<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>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</div>
```
CSS:
```css
.table-container {
overflow: auto;
}
thead {
position: sticky;
top: 0;
background: #f2f2f2;
}
```
以上代码会使表格的表头固定在容器顶部,并且容器会出现滚动条。