带有stickyheaders的Jquery Tablesorter答案

【问题标题】：Jquery Tablesorter with stickyheaders带有stickyheaders的Jquery Tablesorter
【发布时间】：2018-01-04 22:38:43
【问题描述】：

我使用的是 TableSorter 版本 2.28.1。我正在使用带有母版页的 .net。

我在我的 dot net Gridview 中添加了“StickyHeaders”，效果很好。但是，我需要让它像 https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html 中的示例中的第二个表一样工作

我无法让它工作。我将此添加到我的代码中...

widgets: ['zebra', 'StickyHeaders'],
widgetOptions: {
	stickyHeaders_attachTo: '.wrapper' 
}

我将 gridview 放在带有滚动条的 asp:panel 中。它滚动但标题不粘。是否有一个 html（或 aspx）示例，说明您为使表格周围的滚动条和标题保持不变而做了什么？

--- 2018 年 1 月 8 日更新 ---
@Mottie 我正在更新这篇文章，以便我可以更轻松地发布我的发现。我的包装 div 上没有填充/边距。我注意到的是，粘性标题的 div 获得了 .wrapper 类中内容的左侧位置。

&lt;DIV class="tablesorter-sticky-wrapper tablesorter-sticky-visible" style="WIDTH: 1076px; POSITION: absolute; LEFT: 5px; Z-INDEX: 2; TOP: 96px; VISIBILITY: visible"&gt;

我的 .wrapper 类中的填充看起来像这样“填充：0px 5px;”。

如果我在左侧（即开发人员工具中）胡乱摆弄并将其增加到 25 像素，那么它就会对齐。但是如果我将 .wrapper 类更改为 .25px 它仍然关闭，因为整个表格向左移动。

有没有办法将粘性标题的左侧位置与 .wrapper 类中的填充分开？

【问题讨论】：

如果您查看链接的演示中提供的 CSS，您会发现 .wrapper 定义需要具有相对位置和溢出。你的桌子周围有包装纸吗？如果不是，请不要使用attachTo 选项。
我不确定您所说的“包装器”是什么意思。我在桌子周围有一个 asp 面板（面板变成桌子周围的 DIV）。这就是你所说的包装器的意思吗？
我搞定了。我所做的是将“包装器”类添加到表格所在的 asp 面板中。
一个后续问题：当标题卡住时，它会向左移动一点。我弄乱了填充和stickyHeaders_offset，但这似乎没有任何作用。
尝试删除包装 div 上的任何填充/边距，因为小部件会将其添加到粘性标题位置。

标签： jquery tablesorter

【解决方案1】：

我发现了问题。表格的宽度为 98%（这是为了将其与上方的 DIV 对齐）。一旦我删除了桌子上的宽度，粘性标题就很好用了。

【讨论】：