将列的宽度设置为＆＃34;浮动＆＃34;表头已修复

Question

我有一个浮动 HTML table header，在滚动表时它仍然位于顶部。我已经实现了克隆原始表的标题，然后根据滚动位置隐藏/显示它。

当我的表有几列时，＆＃34;浮动标题＆＃34;由于此代码具有与原始表中的列相同的列宽：

$headerClone.children().outerWidth(function(i,val){
    return $headerGrandChildren.eq(i).outerWidth(true);
});

但是，现在表格中有更多列并越过页面右边距，＆＃34;浮动标题＆＃34;正在调整和压缩宽度，忽略设置的width=x样式元素和table-layout: fixed; CSS，请参见屏幕截图：

我已在here中看到"The browser will then set column widths based on the width of cells in the first row of the table"。

问题：如何最好地设置＆＃34;浮动标题的固定大小＆＃34;？我是否应该创建一个隐藏的行，该行将伴随＆＃34; fixed-header＆＃34;所以一旦我的桌子比页面宽，它就不会调整大小？

Answer 1

您可以通过此规则将所有列的width设置为静态值：

.table-header-class-name {
    width: 50px;
}

请注意：

1）50px是一个样本，您可以增加或减少它。

2）您应该将table-header-class-name替换为table header类或范围的类名（根据DOM小组）。

Answer 2

也许这会有所帮助：

$('table, td, th, thead').width(function() {    
    return $(this).width();
});

$('td, th').height(function() { 
    return $(this).height();
});

$('table, thead').css('display','block')

Answer 3

我添加了逻辑，不仅要复制标题（使其成为固定标题），还要复制第一行，因为："The browser will then set column widths based on the width of cells in the first row of the table"。

.append($tbodyFirstRowClone.css('visibility', 'collapse'))

用过：

position: sticky;

它解决了我的用例问题。具体做法是：

• 在我的案例中没有使用响应能力;
• position: fixed;不是侧身可滚动的，所以我无法使用它;