Question

这已被问过无数次：here， there,和 the other place只是在SO上。然而，我找不到真正的好答案。

＆LT;概括＆GT;通常我的表垂直比视口深得多。我希望能够滚动表<tbody>，同时<thead>保持固定且可见。其中一些表格也比视口宽得多。在这里，我希望表格的<thead>能够水平滚动。

为了达到这个效果，我有几十行JS，包括setInterval( )调用以检查scrollLeft和scrollTop，以便我可以重新定位副本 <thead> ¹。它有效，但它在屁股上是一个巨大的，笨拙的，虚弱的和难以维持的痛苦。＆lt; / recap＆gt;

问题：是否存在一些简单的css3方式，存在或正在出现或提议，我可以使用表格<thead>和<tbody>水平和垂直滚动，但彼此独立？谢谢！

¹为什么setInterval( )？因为IE不能统一传递onScroll事件，所以你很傻; 每个人都知道！

Answer 1

我最终根据@Naveed Ahmad的建议对“解决方案”进行了建模。我把表的数据部分放在＆lt; tbody＆gt ;;并做了一个假的＆lt; thead＆gt;我通过引用第一个表行中＆lt; td＆gt;的宽度和偏移量来填充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';
  }
}

这或多或少可以正常on this page。

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>

现在，您可以为身体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

中所做的一个工作示例

是否有一种css3方法来固定y轴，让它在x轴上滚动？

2 个答案: