我正在尝试设计一个具有粘性 thead 和粘性行 Headers 的表 . 所以，基本上，所有 th 元素都必须是粘性的 .
我偶然发现position: sticky css3属性似乎是这项工作的一个很好的候选人，即使它在许多浏览器中尚未得到支持（这对我来说不是问题） . 但MDN文档说：
'position：sticky'对表元素的影响与'position：relative'相同 .
考虑到这一点，我已经构建了一个在Safari 10.0中工作的基本示例，即使粘性元素的边界不守恒 .
在Firefox 50.0中，边框得不到显示但 Headers 不粘 .
所以，我的问题是：如何通过使用 position: sticky 干净地实现这个固定的头部定位 . 似乎实现（实现时）不完整，表格支持更少 .
如果不可能的话，我也会接受JavaScript中的解决方案来实现这一目标（但是由于我的整个应用程序都处于反应状态，因此将jQuery添加到我的堆栈中会非常麻烦） .
这是我现在拥有的代码片段 . 请注意，为了获得一些粘性 Headers ，您基本上需要safari或alpha版本的chrome .
div#container {
height: 200px;
width: 300px;
overflow: auto;
}
table {
border-collapse: collapse;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
th {
background: #B8C1C8;
border: 2px solid black;
}
<div id="container">
<table>
<thead>
<tr>
<th>hehe</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
</tbody>
</table>
</div>
资源我尝试过：
-
Position sticky on thead这给了我一些干净利用
position: sticky的良好领先优势
1 回答
似乎你喜欢那里的一切 . 它也被称为冻结窗格效应 . 有点调整版本：
Forkable Codepen sample
Update ：更好的边界 .