Question

我有一个包含大量行的表，这会产生一个引导程序＆＃34;表格响应＆＃34;使滚动条离开屏幕底部。要查看溢出到两侧的数据，您必须滚动到底部，移动滚动条，然后再向上滚动。

这是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>

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

或者，要以不同的方式看待它，我如何使用屏幕上可用的最大空间量来表格的垂直尺寸？

Answer 1

您可以使用换行div .table-responsive来显示滚动条：

给它一个高度（百分比与否）
将其溢出设置为自动

<强> DEMO

CSS：

body,html{
    height:100%;
}

.table-responsive{
    width:100%;
    height:100%;
    overflow:auto;
}

Answer 2

在您的 CSS 中添加这些行 -

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

Answer 3

使用容器。表响应！有了它，您可以显示滚动条。

您需要将溢出更改为自动，然后它才能像魅力一样发挥作用！：）

overflow: auto;

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

3 个答案: