Bootstrap 水平滚动表

Question

我创建了一个很长的表格，必须在上面水平滚动才能看到所有字段。

我通过添加：

div.horizontal {
   width: 100%;
   height: 500px;
   overflow: auto;
}

table-layout: fixed;

.table {
   display: table;
   table-layout: fixed;
   width: 100%;
}

然后我的表被包裹在一个容器和一个 div 中，如下所示：

<div class="container-fluid">
   <div class="horizontal">
      <table class="table table-bordered" name="int">
...........

一切都按预期工作，但是因为我在水平 div 中定义了一个高度，所以滚动条位于页面中间。但是，当我使用百分比时，它始终是内容的 100%，而不是整个页面。

我的目标是像平常一样在浏览器底部获得滚动条，但能够保留我拥有的这个全宽表格。

这是截图：

如您所见，使用定义的 500 像素，滚动条会到达那里（预期宽度固定）。我只是假设使用百分比100% 会将其推到底部，但事实并非如此。

有什么办法可以让这个滚动条到页面底部吗？

谢谢

Answer 1

尝试将position: fixed; 或absolute 添加到div.horizontal 样式中。