Question

我意识到这个问题在Stack Overflow上有很多问题;然而，在仔细研究了其中一些之后，我相信我的问题还有一个要求。我想将一个常规的html表转换为一个可以垂直和水平滚动的表，而标题仍保留在顶部。该表的宽度超出了页面的宽度，因此我需要在滚动表时水平移动标题。我更喜欢使用纯CSS方法;但是，如果有必要，我会使用Javascript。还没有找到解决所有这一切的解决方案。

Answer 1

此解决方案可能适合您，具体取决于标题的样式。这是纯CSS。 http://salzerdesign.com/blog/?p=191

Answer 2

为什么不使用a并设置高度和宽度以允许溢出。然后只需将你的桌子放在那里就可以了。你好了。

对我而言，这似乎是最合乎逻辑且最简单的方法......

Answer 3

这是一个很好的jQuery插件，适用于所有浏览器！（查看演示）

结果是一个带有固定标题的表，仅垂直滚动（暂时...），但宽度可变。

我开发此插件以解决固定标题+灵活宽度的问题。

检查：https://github.com/benjaminleouzon/tablefixedheader

Answer 4

你可以使用JQuery在几行代码中执行此操作，你可以看到我的其他帖子来创建一个带有修复标题的表和可滚动的主体

Create Table with scrollable body

之后可以想象你有一个div为标题，类名=＆＃34; Top1＆＃34;和一个div为身体的类名=＆＃34; Top2＆＃34;，你可以将一个卷轴绑定到另一个

$('.Top2').bind('scroll', function(){
  $(".Top1").scrollLeft($(this).scrollLeft());
});

$('.Top1').bind('scroll', function(){
  $(".Top2").scrollLeft($(this).scrollLeft());
});

jsFliddle demo

修复了具有可变宽度的标题/可滚动表

4 个答案: