具有固定标题的表，当前的技术状态

Question

这是一个反复出现的问题，因为，永远：如何在向下滚动表格时将标题固定在顶部？

是的，我知道网页不是为了展示类似电子表格的长表而设计的，但是当客户要求这样的东西时（因为他/她习惯那些旧的Excel文档......），你没有选择但遵守。

这是为了总结主要问题和尝试解决方案，修复表格的标题：

1. <thead>元素可以相对位置，但不会从其位置移动;
2. 使用position: absolute或fixed，头部与表格的其余部分“分离”，并且列宽不再匹配;此外，你必须在桌子上方预留一些空间;
3. 这可以使用一个不同的表来解决，只有标题，将身体留在另一个，但不会解决列的不同宽度的问题;
4. 您可以设置固定宽度的列，但根据您的需要，它并不总是适用的 - 即在动态或未知内容的情况下;
5. Javascript可以调整列的宽度，但访问offsetWidth之类的属性会导致重排，即使对于像Chrome或Firefox这样的浏览器来说这也是一项非常繁重的任务，并且即使不是，也会增加令人讨厌的渲染延迟 - 大表但有动态内容;
6. 您可以创建表的副本，使用第一个显示标题，另一个显示主体，但这会使DOM重两倍，并且应该依赖Javascript来复制内容的更改;
7. 将<div>与display: table-whatever一起使用并不能真正解决问题，并且剥夺了您添加rowspan和colspan s的机会。

借助网络的最新技术，也许我们可以尝试新的东西。我使用transform: translate尝试了一个解决方案，其行为非常好（see the fiddle here），和将空间保持在表体上方，和列宽度仍然匹配。

这当然不适用于IE8及更低版本。但它在Chrome，Safari和Firefox中运行良好。它在Opera 12.x及更低版本中不起作用，但由于其全新的Blink渲染引擎， 在Opera 15中工作。我注意到这个效果更好，或者至少与translate相比，而不是translate3d：它显示的闪烁更少。

不幸的是，这在IE9和IE10中不起作用，并且标题保持在他们的位置。这真是一种耻辱，因为无法检测到这种行为（我知道）。

那么，您最近解决此问题的方法是什么？我正在寻找CSS和纯Javascript解决方案。

Answer 1

我最近不得不为客户做这件事，发现它几乎是不可能的。我确实找到了一个名为SlickGrid的非常好的库，但是当它转换为移动时，它就行不通了（性能太大了）。如果移动设备不是您的关注，那么我肯定建议您查看它。 https://github.com/mleibman/SlickGrid