Question

我已经尝试了几个jQuery库来实现这一点，包括floatThead，fixedheadertable和freezeheader，但我对它们每个都有同样的问题。最初，该表看起来很好，但是当THEAD粘在页面顶部时，THEAD中的列宽不再正确排列。

我正在使用Twitter Bootstrap 3.如何正常使用？引导程序会干扰吗？这是否与我的第一个<TR>宽10 <TD>的事实有关？ Colspan问题？有什么提示吗？

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

Screenshot of table head in both positions.

我的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>

我使用FreezeHeader.js的最新尝试如下：

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

Answer 1

我已经调查过了，问题是 freezeHeader 会在table顶部上方创建一个新的虚拟叠加层div，并在其中复制table header那张桌子。

在table header进入main table之前，它会根据表格中的其他单元格计算width。

一旦你拿出它，该表将尝试容纳单元格宽度到单元格的内容。从现在开始，标题在一个新表中被隔离，它现在得到的是它所拥有的唯一单元格内容的宽度 - 表头的列名。其中一些列没有设置宽度 - 有些列确实设置了宽度。如果你想保持相同的宽度，你必须设置一个固定的宽度到10个中的至少9个单元格（如果你想保持它100％流动）或给所有 - 表和单元格固定宽度。

此处的示例（单元格宽度设置为％ - 表格的总最小宽度必须宽于单元格上设置的宽度之和+没有宽度的流体单元格的内容）：http://jsbin.com/racinone/2/

    <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>

注意：另请注意，如果您打算让此表流畅而不破坏它，如果您将表调整为较小的宽度，则需要保留{{1}大于cell width（或使用自动换行），否则它仍然无法计算合适的宽度。

-

您可能还想查看其他一些css方法来实现这一目标：Pure CSS Scrollable Table with Fixed Header

-

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

插件的行为已经以“hacky”的方式运行，所以这是我看到的唯一选择。希望我给你任何好主意。

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

1 个答案: