如何在响应式表格中保持水平滚动条可见？

Question

我有一个表格，有很多行，导致使用Bootstrap的“table-responsive”时，滚动条位于屏幕底部之外。要查看溢出到两侧的数据，您必须向下滚动，移动滚动条，然后再向上滚动。

请查看这个fiddle：http://jsfiddle.net/Lq4uk/1/

以下是HTML代码：

<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
    <th>#</th>
    <th>Header 1</th>
    ... (bunch of headers)
</thead>
<tbody>
    <tr>
        <th>1</th>
        <th>Some long text to make this overflow</th>
        ... (bunch of cells)
    </tr>
    ... (lots more rows)
</tbody>
</table>

如何让水平滚动条始终可见？

或者换个角度看，如何在屏幕上为表格的垂直大小使用最大可用空间？

- Duncan Drennan

---

如果你还在寻找，你可能想要查看Siddharth Pandey的答案。他的fiddle可能是你正在寻找的东西。 - petithomme

Answer 1

在你的CSS中添加以下代码 -

.table-responsive {
 height: 100vh;
 overflow: scroll;
 }

- Alimur Razi Rana

---

这很有效！overflow: auto;也可以用，但是为了获得正确的行为，需要使用高度属性。谢谢。 - Duncan Drennan

Answer 2

使用容器.table-responsive！这样您就可以显示滚动条。

您需要将overflow更改为auto，然后它应该像魔术一样工作！ :)

overflow: auto;

- Patrick Lüthi

---

仅使用 overflow: auto; 时，滚动条仍位于底部。根据标记的答案添加高度即可解决此问题。 - Duncan Drennan