如何修复一些列和一些表的可滚动？

Question

我正在使用twitter-bootstrap 3开发一个网页，有些表格不适合我页面的边距。他们溢出所以我想创建一个像Excel电子表格一样工作的结构。

最左边的两列（蓝色区域）将被固定，并且剩余的列将尽可能显示。如果用户将表格的滚动条向右滚动，将显示溢出列。你可以看到我想要的图片。

将表放入div并规则div overflow-x:scroll对我来说不是解决方案。因为前两列必须始终可见。

有一个解决方案here我试过这个。它只有在我将窗口缩小到较小的宽度值时才有效。

Answer 1

在我看来，您可以使用jquery dataTable以及FixedColumns插件 - 它默认情况下完全符合您的要求。只需在CDN中包含jquery.dataTables.js和jsfixedColumns.min.js（以及css文件）并初始化您的表格：

var table = $('#example').DataTable( {
  sScrollX: "100%",
  sScrollXInner: "150%",
  bScrollCollapse: true        
});
new $.fn.dataTable.FixedColumns(table);

参见演示 - ＆gt; http://jsfiddle.net/n2x8W/

dataTables支持bootstrap，您可以根据需要设置表格的样式。在示例中，我刚刚包含了不那么现代的默认CSS。请注意，初始化会公开dataTables的基本功能，如分页，过滤等。如果您不需要/想要它们，可以轻松地将其插入。

另请注意我使用的是1.9.4版本，因为根据我的经验，这比1.10.x更稳定。

Answer 2

你可以试试这个：
把你的桌子包裹在一个div中，
绝对定位前两列，给它们一些宽度（让我们说Apx和Bpx），
将margin-left:(A+B)px和overflow-x:scroll用于包装器div

小提琴：http://jsfiddle.net/ycYdL/

Answer 3

不幸的是没有。您将需要一个固定部分的表格和一个滚动部分的表格。

为避免行不再是同一高度的问题，请考虑实际复制＆＃34;固定＆＃34;原始表中的列和在可滚动区域上覆盖它们。这看起来在视觉上是相同的（如果您在固定区域设置了纯色背景颜色），但会确保表格按预期工作。

Answer 4

有一些工具可以帮助您解决这个问题。

我可以提供数据表，他们提供的选项可以做到这一点，可能会有一些变化。

看看这里：http://datatables.net/examples/basic_init/scroll_y.html

Answer 5

您可以将表格放入适合屏幕大小的div中，然后自动溢出该div

Answer 6

这可以做到，但并不简单。 。

您基本上需要创建两个表：

1. 左侧的一个薄表，由行标题组成（即蓝色的东西）。

2. 第二个表，位于第一个表右侧的div中，它将包含行的数据字段。然后div需要附加overflow-x: scroll;样式。

我之前没有用水平滚动做过这个，但我已经完成了垂直（顶行保持，其余滚动），这个概念应该在这里工作。

需要注意以下几点：

• 强制匹配行高的CSS将在此处 非常 重要。 。 。使用水平滚动比使用垂直滚动更复杂
• 如果您有任何可访问性要求（例如，屏幕阅读器支持），您可能必须在第二个表中包含一个隐藏的“标题列”，这是第一个表中静态列表的副本，以便屏幕阅读器会将行标题与每个数据单元关联起来。