带排序的固定表头

Posted 2023-05-09

【中文标题】带排序的固定表头

【英文标题】：Fixed Table Header with Sorting

【发布时间】：2015-01-07 05:34:49

【问题描述】：

好的，所以我已经为 tablesorter 工作了 scroller 小部件，但它弄乱了我的表格的标题大小。起初，我以为是complex sorting 使用的一些额外代码导致了问题，但我已经删除了所有额外代码，但仍然有问题。

然后我想，也许是我的样式，所以我清除了所有这些，可以只用一个边框替换它，以使问题可见。

td, th 
 border: 1px #000 solid;


.th-inner 
 position: absolute;
 top: 0;
 line-height: 28px; /* height of header */

当这仍然没有揭示问题时，我开始缩短 tablesorter() 的执行时间，直到它除了调用小部件之外什么都没有。

这是带有我的 CSS 的 JSFiddle，但没有用于复杂排序的额外代码：http://jsfiddle.net/Lv19a465/

这是带有仅边框 CSS 的 JSFiddle：http://jsfiddle.net/Lv19a465/2/

所有迹象都表明有一个边距设置搞砸了，但我在控制台中找不到任何东西，也没有将它设置为 0 因为一切似乎都会影响它。

table, tr, td, th 
 padding: 0 !important;
 margin: 0 !important;

关于我缺少什么的任何想法？

【问题讨论】：

偏移的原因是每个单元格边框之间的间距...要消除这种情况，您可以在样式中添加table, tr, td, th border-collapse: collapse

@almightyBoognish: border-collapse 确实有帮助，但并没有完全解决问题。除了到期日（相等）和公共注释（大 3px）外，所有th 都比td 小 2px。这是 JSFiddle：jsfiddle.net/Lv19a465/3

我没有足够的信息来说明这些<th /> 宽度是如何计算/定义的，所以我无法帮助你，但看起来在确定宽度时需要考虑边框宽度表格标题

@almightyBoognish：感谢您的尝试。代码链接在mottie.github.io/tablesorter/js/widgets/widget-scroller.js，它似乎在复制之前使用内容的宽度动态设置它，但我不是 jQuery 专家，因此我遇到了所有麻烦。 ^^'

【参考方案1】：

您需要在tablesorterconfig 中添加附加参数才能正确显示。

$(function()
 $('#mainlist').tablesorter(
     widgets: [ 'scroller' ],
     headerTemplate : 'content icon'
     widthFixed : true,
 );
);

见http://jsfiddle.net/Lv19a465/5/

【讨论】：

实际上，你的也不行。 widthFixed 末尾有逗号，而不是 headerTemplate。脚本错误并且不执行。如果您正确放置逗号，您会发现问题仍然存在，但感谢您的尝试。 ^^

我的错，我忽略了这一点。

不用担心。感谢您的关注。 ^^