固定table的第一行(表头),不随纵向滚动条滚动,但能横向滚动
时间: 2024-04-08 22:34:05 浏览: 173
固定Table第一行或某几行不随滚动条滚动而滚动
要固定表头并允许横向滚动,你可以使用 CSS 中的 `position: sticky` 属性来实现。
首先,确保整个表格包含在一个固定大小的容器中,例如一个 `<div>` 元素。然后,在 CSS 中为该容器设置 `overflow-x: auto`,以便在需要时显示横向滚动条。
接下来,在表格的 `<thead>` 元素中添加样式 `position: sticky; top: 0;`,这将使表头在垂直方向上固定在容器顶部。
以下是一个示例代码:
```html
<div style="width: 100%; overflow-x: auto;">
<table>
<thead style="position: sticky; top: 0;">
<tr>
<th>表头1</th>
<th>表头2</th>
***
阅读全文