修复 table header

Question

我有一个 table 有很多行和列。垂直滚动时，table header 需要固定在浏览器 window 上。当 table 到达浏览器 window 的顶部时，我通过向 table 添加样式 position: fixed; 来做到这一点。

但是当我水平滚动时，table header 并没有按照我应用固定位置的方式滚动。

如何让 table header 水平滚动（也）。

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 首先滚动垂直条，然后滚动水平滚动条。 table header 没有滚动。

Answer 1

您还可以根据table位置设置滚动时的水平位置：

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

这里是fiddle.

Answer 2

您不需要任何 jQuery，即可达到您描述的 table。

可以重现固定 <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>

修复 table header

Fix table header

javascript

css

jquery

scroll

css-position