我正在使用twitter-bootstrap 3开发一个网页,有些表格不适合我页面的边距。他们溢出所以我想创建一个像Excel电子表格一样工作的结构。
最左边的两列(蓝色区域)将被固定,并且剩余的列将尽可能显示。如果用户将表格的滚动条向右滚动,将显示溢出列。你可以看到我想要的图片。
将表放入div并规则div overflow-x:scroll
对我来说不是解决方案。因为前两列必须始终可见。
有一个解决方案here我试过这个。它只有在我将窗口缩小到较小的宽度值时才有效。
答案 0 :(得分:2)
在我看来,您可以使用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);
参见演示 - > http://jsfiddle.net/n2x8W/
dataTables支持bootstrap,您可以根据需要设置表格的样式。在示例中,我刚刚包含了不那么现代的默认CSS。请注意,初始化会公开dataTables的基本功能,如分页,过滤等。如果您不需要/想要它们,可以轻松地将其插入。
另请注意我使用的是1.9.4版本,因为根据我的经验,这比1.10.x更稳定。
答案 1 :(得分:2)
你可以试试这个:
把你的桌子包裹在一个div中,
绝对定位前两列,给它们一些宽度(让我们说Apx
和Bpx
),
将margin-left:(A+B)px
和overflow-x:scroll
用于包装器div
答案 2 :(得分:1)
不幸的是没有。您将需要一个固定部分的表格和一个滚动部分的表格。
为避免行不再是同一高度的问题,请考虑实际复制"固定"原始表中的列和在可滚动区域上覆盖它们。这看起来在视觉上是相同的(如果您在固定区域设置了纯色背景颜色),但会确保表格按预期工作。
答案 3 :(得分:0)
有一些工具可以帮助您解决这个问题。
我可以提供数据表,他们提供的选项可以做到这一点,可能会有一些变化。
看看这里:http://datatables.net/examples/basic_init/scroll_y.html
答案 4 :(得分:0)
您可以将表格放入适合屏幕大小的div中,然后自动溢出该div
答案 5 :(得分:0)
这可以做到,但并不简单。 。
您基本上需要创建两个表:
左侧的一个薄表,由行标题组成(即蓝色的东西)。
第二个表,位于第一个表右侧的div中,它将包含行的数据字段。然后div需要附加overflow-x: scroll;
样式。
我之前没有用水平滚动做过这个,但我已经完成了垂直(顶行保持,其余滚动),这个概念应该在这里工作。
需要注意以下几点: