时间戳

首页 > 解决方案 > 带有粘性标题的 HTML 表格

javascript - 带有粘性标题的 HTML 表格

问题描述

我需要创建一个水平溢出的表。标题也应该是粘性和溢出的。此外，前 3 列应该是静态的。该表是 RTL。您可以在此处查看示例： https ://www.mouser.co.il/Circuit-Protection/_/N-5g3c 仅适用于桌面版本。

我没有要发送的代码，我的主要问题是标题粘着但水平溢出。

谢谢你，伊兰·格林沃尔德

标签： javascriptcsshtml-table

解决方案

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 设置。

推荐阅读