有沒有css3方法來修復 <thead> 在y軸上，讓它在x軸上滾動？

Question

這已被問過無數次： 在這里 ， 在那里 ，而另一個地方只是在SO上。 然而，我找不到真正的好答案。

<recap>通常我的表垂直比視口深得多。 我希望能夠滾動表格的<tbody>而其<thead>保持固定且可見。 其中一些表格也比視口寬得多。 在這里，我希望表的<thead>水平滾動。

為了獲得效果，我有幾十行JS，包括setInterval( )調用來檢查scrollLeft和scrollTop ，這樣我就可以重新定位<thead> ¹的副本 。 它有效，但它在屁股上是一個巨大的，笨拙的，虛弱的，不可維護的痛苦。</ recap>

問題：是否有一些簡單的css3方式，存在的或新興的或提議的，我可以使用一個表的<thead>和<tbody>水平和垂直滾動，但彼此獨立？ 謝謝！

---

¹為什么setInterval( ) ？ 因為IE不能統一傳遞onScroll事件，所以你很傻; 大家都知道！

Answer 1

我最終根據@Naveed Ahmad的建議對“解決方案”進行了建模。 我把表的數據部分放在<tbody>中; 並通過引用第一個表行中<td>的寬度和偏移量，在onLoad時填寫了一個虛假的<thead>，如下所示：

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設置為auto 。 喜歡：

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中做的一個工作示例