修复表格标题

Fix table header

本文关键字：标题 表格      更新时间：2023-09-26

我有一个有很多行和列的表。垂直滚动时，表格标题需要固定在浏览器窗口上。我已经通过在表头到达浏览器窗口顶部时向其添加样式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链接首先滚动垂直条，然后水平滚动高滚动条。表格标题未滚动。

您还可以根据表格位置在滚动时设置其水平位置：

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

这是一把小提琴。

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

只需使用CSS:就可以再现固定的<thead>和垂直滚动的<tbody>

.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>

相关文章：