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

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 s不与之对齐td的tbody 。 有时它对齐，有时不对齐。 在Firefox中可以正常使用。 该问题来自chrome浏览器。

我也尝试使用jquery插件对其进行修复，但是它们均无法正常工作。

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

Answer 1

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

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

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

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

问题描述

1 个解决方案

解决方案1
1 2014-11-06 17:37:15

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

问题描述

1 个解决方案

解决方案1 1 2014-11-06 17:37:15

解决方案1
1 2014-11-06 17:37:15