修复表头

Question

我有一个包含很多行和列的表。滚动垂直时，需要在浏览器窗口上修复表头。我已经通过在表头到达浏览器窗口顶部时向表头添加样式position: fixed;来完成此操作。

但是当我水平滚动时，表格标题不会在我应用固定位置时滚动。

如何使表头水平滚动（也）。

使用Javascript：

$(window).scroll(function () {
    var spec_lot_dash_sticky = $('.spec_dash_thead'),
        spec_lot_dash_scroll = $(window).scrollTop();
    if (spec_lot_dash_scroll >= ($("#table_id").offset().top)) {
        spec_lot_dash_sticky.addClass('fixed')
        $(".fixed").css("top", spec_lot_dash_thead_scroll_top)
    } else {
        spec_lot_dash_sticky.removeClass('fixed');
    }

});

jsfiddle link 首先滚动垂直条，然后滚动horizo​​ntall滚动条。表头不滚动。

Answer 1

您还可以根据表格位置设置其水平位置：

spec_lot_dash_sticky.css('left', $("#filter_table").offset().left - $(window).scrollLeft());

这是fiddle。

Answer 2

您不需要任何jQuery来实现您描述的表格。

只需使用<thead>即可重现固定<tbody>和垂直滚动CSS：

.fixed{position:fixed}

#filter_table thead, #filter_table tbody {
display: block;
position: relative;
}

#filter_table th, #filter_table td {
width: 120px;
text-align: center;
}

#filter_table tbody {
height: 200px;
overflow: auto;
}

<table id="filter_table" style="margin-top:5%">

<thead class="spec_dash_thead" style="background-color:blue">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
</tr>
</thead>
      
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
</tbody>

</table>