1

这是场景。我有一个填充滚动数据的表格。它包含大量行。并且在每个滚动宽度上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包含在 a 中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，但ths 与tdof不一致tbody。有时它对齐，有时它不对齐。这在 Firefox 中可以正常工作。问题出现在 chrome 浏览器中。

我也尝试使用jquery插件修复它，但它们都不起作用。

动态分配th宽度时如何解决更改其位置的问题？th

4

1 回答 1

1

我使用一个插件来解决粘性标题，该插件在处理宽度方面比我使用自定义滚动 CSS 和 HTML 更智能。数据表是我选择的武器。

这是一个工作演示： https ://datatables.net/extensions/fixedheader/

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

于 2014-11-06T17:37:15.950 回答