html - 有没有一种 css3 方法可以将 <thead> 固定在 y 轴上，让它在 x 轴上滚动？

Question

这已被问了无数次:here , there,和 the other place就这样。然而，我找不到真正好的答案。

通常我的表格在垂直方向上比视口(viewport)深得多。我希望能够滚动表格的 <tbody>而它的 <thead>保持固定和可见。其中一些表格也比视口(viewport)宽得多。在这里，我想要表格的 <thead>水平滚动。

为了得到效果，我有几十行JS，包括setInterval( )打电话检查scrollLeft和 scrollTop ，以便我可以重新定位 <thead> 的副本 ¹。它有效，但它是一个巨大的、笨拙的、脆弱的、无法维持的痛苦。

问题:是否有一些直接的 css3 方法(现有的、新兴的或提议的)可以用来获取表格的 <thead>和 <tbody>水平和垂直滚动，但彼此独立？ 谢谢!

---

¹ 为什么 setInterval( ) ？因为 IE 不统一提供 onScroll事件，你傻； 每个人都知道!

Answer 1

我最终根据@Naveed Ahmad 的建议对“解决方案”进行了建模。我将表格的数据部分放在 中；并制作了一个假的 ，我在加载时通​​过引用表格第一行中 的宽度和偏移量来填充它，如下所示:

function position_col_heads ( ) {
  // get all the TD child elements from the first row
  var tds = main_tbody.children[0].getElementsByTagName('TD'); 
  for ( var i = 0; i < tds.length; ++i ) {
    thead.children[i].style.left =
      parseFloat( tds[i].offsetLeft ) + 'px';
    thead.children[i].style.width = 
      parseFloat( tds[i].scrollWidth ) + 'px';
  }
}

这或多或少可行 on this page .