我正在尝试设计一个具有粘性thead和粘性行标题的表格。所以，基本上，所有th元素都必须是粘性的。
我偶然发现了position: stickycss3 属性，它似乎是这项工作的理想人选，尽管许多浏览器还不支持它（这对我来说不是问题）。但是 MDN 文档说：
“位置：粘性”对表格元素的影响与“位置：相对”相同。
考虑到这一点，我构建了一个在 Safari 10.0 中工作的基本示例，即使粘性元素的边界没有保留。
在 Firefox 50.0 中，不显示边框但不显示标题。
所以，我的问题是：如何使用position: sticky. 似乎实施（实施时）不完整，表的支持更少。
如果不可能，我也愿意接受 JavaScript 中的解决方案来实现这一点（但是将 jQuery 添加到我的堆栈中会非常麻烦，因为我的整个应用程序都在响应）。
这是我现在拥有的代码片段。请注意，为了有一些粘性标题，您基本上需要 safari 或 chrome 的 alpha 版本。
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>我尝试过的资源：
- typanus的一篇很棒的文章
- 位置粘性在thead上，这让我在一些干净的使用方面有了很好的领先优势
position: sticky position: sticky规范_