html - 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% 的内容，而不是整个页面的内容。

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

这是一个截图:

如您所见，使用 Defined 500px 时，滚动条停在那里(预期宽度固定)。我只是假设使用百分比 100% 会把它推到底部，但事实并非如此。

关于如何将滚动条移至页面底部的任何想法？

谢谢

Answer 1

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