2

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

是的，我知道 Web 并非旨在显示类似电子表格的长表格，但是当客户要求类似的东西时（因为他/她习惯于那些旧的 Excel 文档......），你别无选择，只能遵守.

这是对修复表头的主要问题和尝试的解决方案进行总结：

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

随着网络的最新技术，也许我们可以尝试一些新的东西。我已经尝试了一个解决方案，使用transform: translate它表现得可以接受（参见这里的小提琴），并保持表格主体上方的空间，并且列宽仍然匹配。

这当然不适用于 IE8 及更低版本。但它在 Chrome、Safari 和 Firefox 中运行良好。它不适用于 Opera 12.x 及更低版本，但由于其全新的 Blink 渲染引擎，它确实可以在 Opera 15 中使用。我注意到这translate比 with效果更好或至少与 with 一样好translate3d：它显示的闪烁少了一点。

不幸的是，这在 IE9 和 IE10 中不起作用，并且标题保持在它们的位置。这真的很遗憾，因为没有办法检测到这种行为（我知道）。

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

4

1 回答 1

1

I recently had to do this exact thing for a client and found it be next to impossible. I did find a really good library called SlickGrid, however when it came to translating that to mobile, it just wouldn't work (performance was too big of an issue). If mobile is not a concern of yours then I definitely suggest checking it out. https://github.com/mleibman/SlickGrid

于 2013-07-10T23:16:29.063 回答