带有粘性标题的 HTML 表格答案

【问题标题】：HTML table with sticky header带有粘性标题的 HTML 表格
【发布时间】：2020-01-30 09:01:41
【问题描述】：

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

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

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

【问题讨论】：

你以前试过吗？请发送代码。
SO 不是免费的编码服务。请张贴您尝试过的代码，告诉我们您遇到问题的部分，我们可以从那里提供帮助。请务必发布您尝试过的代码。
我没有要发送的代码，我的主要问题是标题粘滞但也溢出。谢谢
带有固定标题的表格并不是一个新问题，所以如果你做一些研究，你应该能够找到很多。如果您在尝试了几个解决方案之后遇到问题，您可以返回这里使用代码。

标签： javascript css html-table

【解决方案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 设置。

【讨论】：

我会试试的，谢谢。是否支持所有浏览器？
@EranGreenwald 所有浏览器都支持这一点，它会溢出父级内部的内容。你也应该将表格设置为相对的。我会编辑我的答案。
谢谢，它正在工作。是否可以像我发送的示例链接那样不设置高度？
@EranGreenwald 如果它的工作然后接受它作为答案:) 你的意思是什么？那个标题的高度是多少？还是桌子？请详细说明，我会提供帮助
@EranGreenwald 哦，你的意思是 height:200px 和 overflow: hidden 就像我在我的例子中所做的那样？当然！只需删除那两行，它仍然可以工作！