Question

我需要创建一个水平溢出的表。标头也应该发粘并且溢出。同样，前三列应该是静态的。该表是RTL。您可以在此处查看示例： https://www.mouser.co.il/Circuit-Protection/_/N-5g3c 仅在台式机版本上可用。

我没有要发送的代码，我的主要问题是使标头保持粘性但水平方向也溢出。

谢谢你，埃兰·格林瓦尔德

Answer 1

th{
  position:sticky;
  top:0px;
  background:#f2f2f2;
}
.table-wrap{
  float:left;
  width:100%;
  height:200px;
  overflow:auto;
}
table{
  position:relative;
}

<div class="table-wrap">
<table>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>

<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
</table>
</div>

如果标头只有一行...很简单：

table tr th{
    position:sticky;
    top:0px;
    z-index:150;
}

，与列相同，但您未设置顶部，但左/右取决于RTL / LTR设置。

带有标头的HTML表

1 个答案: