Question

以下是该方案。我有一个表格，用于填充滚动数据。它包含大量行。并且th的每个滚动宽度都会动态变化。该表使用knockoutjs构建。请在下面找到th的结构。

<th data-bind="style: { 'min-width': minWidth + 'px', width: width + '%', height: '25px', 'text-align': 'center' }" style="min-width: 20px; width: 9.30232558139535%; height: 25px; text-align: center;">
    <div class="headerCell" data-bind="click: click" style="width: 136px;">
        <div class="headerText" style="text-align: center;">
            <div class="headerName" data-bind="attr:{title: name}, text: name" title="Name">Name</div>
            <div style="float: right; margin-top: 10PX; MARGIN-right: 1px;" data-bind="css: { 'arrow-up': sortType() == 'Asc', 'arrow-down': sortType() == 'Desc' }" class=""></div>
        </div>
    </div>
</th>

th的文字包含在div中。课程headerCell和headerText如下：

.headerCell{
    position: absolute;
    background: transparent;
    line-height: 20px;
    top: 0;
    margin-left: -1px;
    cursor: pointer;
}
.headerText{
    left: 0;
    margin: 0;
    width: 100%;
    color: white;
    background-color: #333333;
}

现在th fixed仍在th，但td与tbody的{{1}}不一致。有时它会对齐，有时则不对齐。这在Firefox中正常工作。问题出在Chrome浏览器中。

我尝试用jquery插件修复它，但它们都没有用。

如果动态指定th的宽度，如何解决th问题会改变其位置？

Answer 1

我用一个插件来解决粘性标题，这个插件比处理自定义滚动的CSS和HTML更容易处理宽度。数据表是我的首选武器。

这是一个有效的演示：https://datatables.net/extensions/fixedheader/

一个隐藏的好处 - 对于浏览器（和你）来说，它的标记要少得多。如果你走这条路并使用HTML表格选项，不要忘记使用带有<head>和<body>元素的格式正确的html表，因为Datatables非常特别。

固定表格标题更改位置/未在chrome中对齐

1 个答案: