有没有一种css3方法可以在y轴上固定，让它在x轴上滚动？

这个问题已经被问过无数次了：here, there, and 另一个地方就这样。然而我找不到真正好的答案。

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

To get the effect, I have dozens of lines of JS, including setInterval( ) calls to check scrollLeft and scrollTop, so that I can reposition a copy of <thead>¹. It works but it's a huge, ungainly, frail and unmaintainable pain in the ass.</recap>

问题：是否有一些简单的 css3 方式（现有的、新兴的或提议的）我可以用来获取表格<thead> and <tbody>水平和垂直滚动，但彼此独立？ 谢谢！

¹ Why setInterval( )? Because IE doesn't uniformly deliver onScroll events, you silly; everybody knows that!

我最终根据@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';
  }
}

这或多或少可以正常工作在本页.