问题标签 [fixed-header-tables]

我正在使用 html、jQuery、JSON 并遇到以下需要冻结表头的任务。我已经尝试了许多插件来冻结标题，但问题是当 tbody 通过 jQuery 中的 ajax 调用填充 json 数据时，克隆表标题的宽度和 tbody 中列的原始宽度没有对齐..我我在下面发布代码，请有人告诉我哪里出错了。

HTML部分：

使用的 CSS 样式：

jQuery脚本：

我需要在开始时滚动一个带有 2 个固定列的水平表。这是到目前为止我所拥有的链接，我知道我非常接近，我只是无法让包装器包裹桌子的主体。

http://jsfiddle.net/ajamali/TBnqw/1147/

任何想法，我错过了什么？

我在我的代码中使用了这个 gist中的固定标头。我希望能够单击标题列并根据单击的列标题对表格进行排序。但我无法掌握该列上的点击事件。

我正在使用 jQuery 在运行时创建一个表。该表来自 JSON 数据。问题是我需要为表格提供一个固定的标题，这样当我滚动它时，标题不应该移动。我知道我可以创建 2 个 div，一个仅用于标题，另一个用于表格内容。我不能这样做，因为我还需要调整列的大小。是否有任何 jQuery 插件或代码可以做同样的事情？

我有一个包含的 div。

具有固定标题属性的表。我通过编写 2 个 div 来实现它，第一个 div 包含一个只定义标题的表，下一个 div 包含一个包含所有数据的表。现在为了保持对齐，我给了它们一个固定的宽度。

带有固定标题的表工作正常。

但现在问题来了，我必须通过按钮单击事件来缩小和展开表格。检查我的以下代码是否有帮助。如果有其他方法可以实现这一点，请提出建议。

上表是虚拟的，因为我有一大堆 cols。但我基本上是这样做的。只有高度宽度会改变。

我的脚本不起作用：

请帮我解决这个问题。

提前谢谢。

我需要始终显示标题和侧边栏索引，但让内容可以自由滚动 x & y ...这个问题的任何解决方案？

我查看了 DataTables jQuery 插件（例如：链接），但我想知道是否有任何替代方案。

我需要创建一个带有固定标题和固定第一列的 html 表（或类似的外观）。

到目前为止我看到的每个解决方案都使用 Javascript 或jQuery设置 scrollTop/scrollLeft，但它在移动浏览器上运行不顺畅，所以我正在寻找一个纯 CSS 解决方案。

我在这里找到了固定列的解决方案：jsfiddle.net/C8Dtf/20/但我不知道如何增强它以使标题也固定。

我希望它在 webkit 浏览器上工作或使用一些css3功能，但我再说一遍，我不想Javascript用于滚动。

编辑：这是我想要实现的行为示例：https ://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

我在 ASP 中继器上使用来自 DataTables ( http://datatables.net/ )的 FixedHeader 函数 ( http://datatables.net/extras/fixedcolumns/ )。

加载页面时，转发器/表不可见，用户必须在下拉列表中选择一个项目才能将转发器进行数据绑定。

脚本作为 ScriptReferences 添加到脚本管理器中。

当页面/回发完成时，启动表的代码使用：

初始化：（只有表存在）

这工作得很好。

我在更新面板中添加了一个什么都不做的 asp 按钮，只是为了获得回发。在此之后，当我尝试滚动以下行时它会失败：

（我是否重新创建了固定标题并不重要。（新的 FixedHeader ...））

我还尝试在 asp 回发之后对 FixedHeader-object 执行 fnUpdate，fixedHeaderList.fnUpdate()

但这只会导致 javascript 错误：

有什么想法吗？

这是一个反复出现的问题，就像永远一样：向下滚动表格时如何将标题固定在顶部？

是的，我知道 Web 并非旨在显示类似电子表格的长表格，但是当客户要求类似的东西时（因为他/她习惯于那些旧的 Excel 文档......），你别无选择，只能遵守.

这是对修复表头的主要问题和尝试的解决方案进行总结：

1. 一个<thead>元素可以相对定位，但它不会从它的位置移动；
2. 使用position: absoluteor fixed，头部与表格的其余部分“分离”，列宽不再匹配；此外，您必须在表体上方预留一些空间；
3. 这可以通过仅针对标题使用不同的表格来解决，而将正文留在另一个表格中，但不能解决列宽不同的问题；
4. 您可以设置具有固定宽度的列，但根据您的需要，它并不总是适用 - 即在动态或未知内容的情况下；
5. Javascript 可以调整列的宽度，但访问属性之类offsetWidth的会导致重排，即使对于像 Chrome 或 Firefox 这样的浏览器来说，这也是一项相当繁重的任务，并且会增加一个恼人的渲染延迟，即使是不太大的表格，但具有动态内容;
6. 您可以创建表格的副本，使用第一个显示标题，另一个显示正文，但这会使 DOM 变得沉重，并且应该依赖 Javascript 来复制内容的更改；
7. 使用<div>s withdisplay: table-whatever实际上不会解决任何问题，并且剥夺了您添加rowspans 和colspans 的机会。

随着网络的最新技术，也许我们可以尝试一些新的东西。我已经尝试了一个解决方案，使用transform: translate它表现得可以接受（参见这里的小提琴），并保持表格主体上方的空间，并且列宽仍然匹配。

这当然不适用于 IE8 及更低版本。但它在 Chrome、Safari 和 Firefox 中运行良好。它不适用于 Opera 12.x 及更低版本，但由于其全新的 Blink 渲染引擎，它确实可以在 Opera 15 中使用。我注意到这translate比 with效果更好或至少与 with 一样好translate3d：它显示的闪烁少了一点。

不幸的是，这在 IE9 和 IE10 中不起作用，并且标题保持在它们的位置。这真的很遗憾，因为没有办法检测到这种行为（我知道）。

那么，您最近针对此问题的解决方案是什么？我正在寻找 CSS 和纯 Javascript 解决方案。

我已经使用这个 SO question中的代码成功地创建了固定的表头，但是我在将其调整到我的页面时遇到了一些我无法弄清楚的问题。我对 Javascript/jQuery 有点陌生，所以请多多包涵。

该代码依赖于浏览器中的滚动事件来检测 THEAD何时不在视图中，以便它知道何时克隆表并将克隆的标题放置在页面顶部。
但是，我的页面在页面顶部有一个固定的DIV，其中包含一个搜索栏等，当它存在时，固定的标题不起作用。由于我需要固定区域，因此我正在努力寻找解决方法。这可能真的很简单，但我没有看到它。

代码片段如下：

这是一个带有精简版页面的 JSFiddle。

http://jsfiddle.net/urvfE/

如果您删除 CSS 部分#topsection，#table-container您将看到固定的标题在起作用。当这些部分出现时，没有任何作用。

顺便说一句，我还有另一个问题。如果我border-collapse:collapse在桌子上使用以获得漂亮的边框，Firefox 不会正确呈现固定标题。它会在顶部呈现一个完整的空表。任何想法如何规避这个？