表标题列无法使用固定标题保持宽度 [英] Table header columns not maintaining width using fixed header
问题描述
我已经尝试了几种jQuery库来使其工作，包括 floatThead ， fixedheadertable 和
I have tried several jQuery libs to get this to work, including floatThead, fixedheadertable and freezeheader but I am having the same issue with each of them. The table looks fine, initially, but as soon as the THEAD sticks to the top of the page, the column widths in the THEAD no longer line up properly.
我正在使用Twitter Bootstrap3.如何使其正常工作?引导程序会干扰吗?我的第一个<TR>宽为10 <TD>的事实与它有关吗?科尔斯潘问题?有什么提示吗?
I am using Twitter Bootstrap 3. How can I make this work properly? Is bootstrap interfering? Does it have something to do with the fact that my first <TR> is 10 <TD>s wide? Colspan issue? Any tips, please?
下面是一个截图，向您展示我的意思:
Here's a screenshot to show you what I mean:
我的HTML如下所示:
My HTML goes something like this:
<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()">±</span></center></td>
</tr>
</thead>
<?php echo $RESULTSTBL; //echo data rows ?>
</table>
</div>
以及我最近一次尝试使用 FreezeHeader.js 看起来像这样:
And the my latest attempt using FreezeHeader.js looks like this:
$('table.table').freezeHeader();
推荐答案
我已经研究了它，问题是 freezeHeader 在table顶部上方创建了一个新的虚拟覆盖div.并在同一张表中复制您的table header.
I've looked into it and the problem is that freezeHeader creates a new dummy overlay div above the top of your table and makes a copy of your table header inside that same table.
直到table header在您的main table内部，它才根据表中的其他单元格计算出它的width.
Until the table header was inside your main table, it got it's width calculated based on other cells in the table .
取出后，表格将尝试使单元格宽度适应单元格的内容.由于现在标题被隔离在新表中，因此现在它从它唯一的单元格内容中获得宽度-表标题的列名.这些列中的一些没有设置宽度-在某些列上您设置了宽度.如果要保持相同的宽度，则必须将固定宽度设置为至少10个单元格中有9个单元格(如果要使其保持100％流畅)，或者为所有表格和单元格提供固定宽度.
Once you take it out, the table will try to accomodate the cell width to the content of the cell. Since now the header is isolated in a new table, it now get's the width from the only cell content that it has - the column names of the table header. Some of those columns don't have a set width - on some you did set the width. If you want to keep it the same width, you will have to set a fixed width to atleast 9 cells out of 10 (if you want to keep it 100% fluid) or give fixed width to all - table and cells.
此处的示例(以％设置的单元格宽度-表格的总最小宽度必须大于单元格上设置的宽度总和+不带宽度的流体单元格的内容之和):
Sample here (cells width set in % - the total minimum width of the table has to be wider than the sum of the widths set on cells + the content of the fluid cell without width): 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()">±</span></center></td>
</tr>
注意:另外请记住，如果您打算使此表流畅而不破坏它，那么如果将表的大小调整为较小的宽度，则需要将cell width保持较大而不是content within it(或使用自动换行)，否则仍将无法计算适当的宽度.
Note: Also keep in mind that if you are planning to have this table fluid and not break it, if you resize the table to a smaller width, you need to keep the cell width larger than the content within it (or use word wrap) else it will still fail to calculate the appropriate width.
-
您可能还想看看实现此目的的其他CSS方法:带有CSS的纯CSS可滚动表固定标题
You may also want to look at some other css approaches to achieve this: Pure CSS Scrollable Table with Fixed Header
-
我可以想象的另一种方法是将原始表中第一行的单元格宽度写入javascript数组，并在调用插件后，还进行回调并遍历该数组并在其中设置单元格宽度新数组(这可能是最灵活的方法).
Another approach I could imagine, is to write the cell widths of the first row in the original table into a javascript array and after you call the plugin, you also do a callback and iterate over the array and set the cell widths in the new array (this would probably be the most flexible approach).
该插件的行为已经以一种"hacky"的方式起作用，所以这是我所看到的唯一选项.希望我给您带来好主意.
The behaviour of the plugin already works in a "hacky" way, so this are kinda the only options I see. Hope I gave you any good ideas.
这篇关于表标题列无法使用固定标题保持宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
