Javascript 表标题列不使用固定标题保持宽度

我已经尝试了几个jquerylib来实现这一点，包括，但我对它们都有相同的问题。起初，表格看起来很好，但一旦THEAD粘到页面顶部，THEAD中的列宽就不再正确对齐

我正在使用Twitter引导程序3。我怎样才能使它正常工作？引导会干扰吗？这与我的第一个

宽度为10

有关吗？科尔斯潘问题？有什么建议吗

下面是一个屏幕截图，向您展示我的意思：

我的HTML是这样的：

<div class="table-responsive" style="width:100%;">
    <table class="table table-bordered table-hover table-striped display-tbl" style="width:100%;">
        <tr>
            <td colspan="10">
                <div id="content">
                    <ul id="tabs" class="nav nav-tabs tabArea" data-tabs="tabs">
                        <li class='active'><a href="#" class="top-tab">All</a></li>
                        <li><a href="#" class="top-tab">Active</a></li>
                        <li><a href="#" class="top-tab">Inactive</a></li>
                        <li><a href="#" class="top-tab">Follow-up</a></li>
                        <li><a href="#" class="top-tab">Sold</a></li>
                        <li><a href="#" class="top-tab">Dead</a></li>
                        <li><a href="#" class="top-tab">Applications (1233)</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <thead>
            <tr style="background-color:#DFE8EB;">
                <td style="width:5em;font-weight:bold;">Date</td>
                <td style="width:5em;font-weight:bold;">Appt</td>
                <td style="font-weight:bold;">First</td>
                <td style="font-weight:bold;">Last</td>
                <td style="font-weight:bold;">Campaign</td>
                <td style="width:5em;font-weight:bold;">Phone</td>
                <td style="font-weight:bold;">City</td>
                <td style="width:4em;font-weight:bold;">Status</td>
                <td style="width:9em; font-weight:bold;">Actions</td>
                <td style="width:1.5em;"><center><span class="fakelink" onclick="checkedAll()">&plusmn;</span></center></td>
            </tr>
        </thead>
        <?php echo $RESULTSTBL; //echo data rows ?>
    </table> 
</div>

$('table.table').freezeHeader();

---

我已经研究过了，问题是freezeHeader在

表

顶部上方创建了一个新的虚拟覆盖div，并在同一个表中复制了

表头

在

表格标题

位于

主表格

内之前，它会根据表格中的其他单元格计算其宽度

取出后，表格将尝试根据单元格内容调整单元格宽度。由于现在表头被隔离在一个新表中，所以它现在从它拥有的唯一单元格内容（表头的列名）中获取宽度。有些列没有设置宽度-有些列的宽度是您设置的。如果要保持相同的宽度，则必须将固定宽度设置为10个单元格中的至少9个（如果要保持100%流体），或者为所有表格和单元格指定固定宽度

此处示例（单元格宽度设置%-表格的总最小宽度必须大于单元格上设置的宽度+不带宽度的流体单元格内容的总和）：

日期
Appt
弗斯特
最后
运动
电话
城市
地位
行动
±；

注意：还请记住，如果您计划使此表格流畅而不破坏它，如果您将表格调整为较小的宽度，则需要使

单元格宽度

大于其中的

内容

（或使用换行符），否则它仍然无法计算适当的宽度

--

您可能还想看看其他一些css方法来实现这一点：

--

我可以想象的另一种方法是，将原始表中第一行的单元格宽度写入一个javascript数组，在调用插件后，还可以回调并迭代数组，并在新数组中设置单元格宽度（这可能是最灵活的方法）

---

插件的行为已经以“黑客”的方式工作，所以这是我看到的唯一选项。希望我能给你一些好主意

请问为什么不使用数据表？我知道这与你的问题无关，但这会对阿洛蒂有所帮助，因为他没有理由这么做。使用标准引导类，我的表看起来很好。这能解决我的问题吗？好吧，你可以使用数据表，并使用它们的插件来做几乎所有你想做的事情，包括固定标题。。分类等等，你可以保持你的styling@Adelphia是的-我成功地重现了这个问题-如果你仍然没有解决它，我会稍后再处理它-首先要完成一些事情。谢谢@easwee，我将不胜感激：）

    <tr style="background-color:#DFE8EB;">
        <td style="width:90px;font-weight:bold;">Date</td>
        <td style="width:60px;font-weight:bold;">Appt</td>
        <td style="width:100px;font-weight:bold;">First</td>
        <td style="width:100px;font-weight:bold;">Last</td>
        <td style="font-weight:bold;">Campaign</td> <!-- fluid cell - can be only one -->
        <td style="width:100px;font-weight:bold;">Phone</td>
        <td style="width:100px;font-weight:bold;">City</td>
        <td style="width:100px;font-weight:bold;">Status</td>
        <td style="width:100px;font-weight:bold;">Actions</td>
        <td style="width:100px;"><center><span class="fakelink" onclick="checkedAll()">&plusmn;</span></center></td>
    </tr>