Question

我有一个带垂直滚动条的表

<div id="div_data" style="top: 7px;">
<table id="data" cellspacing="0" cellpadding="0">
            <thead>
              <tr class="fix"><td class="newClass"> <div> Algebra </div></td>
                   <td class="newClass"><div> Geometry</div></td>
                   <td class="newClass"><div> Theorems</div></td> 
                   <td class="newClass"><div> Comment</div></td>
                   </tr>
            </thead>
            <tbody style="overflow:auto; height:100px;">
            ......................
            </tbody>

    </table>
        <table id="header-fixed" cellspacing="0" cellpadding="0"></table> 
    </div>

当我滚动#data table时，我需要在不滚动的情况下修复表标题元素。为此我已经完成了以下jquery代码：

var tableOffset = $("#data").offset().top;
var $header = $("#data > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);  
    $("#div_data").scroll(function(){ 
        $('#div_row_headers').scrollTop($('#div_data').scrollTop()); 
         var offset = $(this).scrollTop();

        if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
            $fixedHeader.show();
        }
        else if (offset < tableOffset) {
            $fixedHeader.hide();
        } 
    });

第一个表元素内的内容克隆在第二个表中，但#header-fixed表的位置不在第一个表的标题区域。它位于表的中间我只是想把它叠加在元素的位置上 #data table。我的css如下：

#header-fixed { 
position: fixed; 
display:none;
background-color:white;
}
table#header-fixed tr td {
    width: 155px;
}       
table#header-fixed tr td div {
    width: 155px;
    float: left;
    text-align: center;
}

编辑：当我滚动窗口滚动条时，新表是固定的，我需要滚动表格，当我滚动窗口滚动条

Answer 1

您唯一需要做的就是使用tbody标签包裹您的表体。并将以下css应用于该标记。

 tbody {
    display: block;
    height: 100px;
    overflow: auto;        
    width: 100%;
}

即使在滚动之后也使表标题的位置固定

1 个答案: