表标题列不使用固定标题维护宽度

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

我正在使用Twitter Bootstrap 3.我怎样才能正常工作? 引导程序会干扰吗? 这是否与我的第一个是10 宽的事实有关? Colspan问题? 有什么提示吗?

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

两个位置的表头截图。

我的HTML是这样的:

 
Date Appt First Last Campaign Phone City Status Actions ±

我使用FreezeHeader.js的最新尝试看起来像这样:

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

我调查了一下,问题是freezeHeadertable顶部上方创建了一个新的虚拟叠加div,并在同一个表中创建了table header的副本。

table header位于main table内部之前,它会根据表格中的其他单元格计算width

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

这里的样本(单元格宽度设置为% – 表格的总最小宽度必须宽于单元格上设置的宽度之和+没有宽度的流体单元格的内容): http : //jsbin.com/racinone/ 2 /

   Date Appt First Last Campaign  Phone City Status Actions 
±

注意:另请注意,如果您计划让此表流畅而不破坏它,如果将表调整为较小的宽度,则需要保持cell width大于其中的content within it (或使用自动换行)否则它仍然无法计算适当的宽度。

您可能还想查看其他一些css方法来实现这一点: 带有固定标头的纯CSS可滚动表

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

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