有没有 css3 方法来修复？在y轴上，让它在x轴上滚动？

Question

这个问题已经被问过无数次了：这里，<一个href="https://stackoverflow.com/questions/4334205/how-can-i-tell-iscroll-that-a-tbody-should-scroll-and-vanish-behind-a-thead"> 那里、 和 另一个地方就在所以。然而我找不到真正好的答案。

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

为了达到效果，我有几十行JS，包括setInterval()调用来检查scrollLeft和scrollTop，以便我可以重新定位¹ 的副本。它确实有效，但它是一个巨大的、笨拙的、脆弱的、难以维持的痛苦。

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

---

¹ 为什么setInterval( )？因为 IE 不统一传递 onScroll 事件，你傻了； 每个人都知道这一点！

Answer 1

我最终根据@Naveed Ahmad 的建议对“解决方案”进行了建模。我将表的数据部分放在 中；并做了一个假的<头>我在 onLoad 时通过参考第一个表行中的 的宽度和偏移量填写，如下所示：

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';
  }
}

这或多或少可行 在此页面上。

Answer 2

一种肮脏的方法是将标题表放在单独的 div 中，例如：

<div class="header">
<table>
    <thead><tr><td>#</td><td>v</td></tr></thead>
</table>
</div>

然后将正文放在另一个 div 中，例如：

<div class="body">
    <table>
        <tbody>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>         
    </tbody>
</table> 
</div>

现在您可以为 body div 提供固定高度并设置 oveflow 到自动。就像：

table{border:0px solid #ccc;height:30px;}
table tr td{border:1px solid #ccc;padding:5px;}
div.body{height:70px;overflow:auto;border-bottom:1px solid #ccc;}

这是我在 jsfiddle 中所做的一个工作示例