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

How do I keep the horizontal scroll bar visible in a responsive table?

提问by Duncan Drennan

I have a table with lots of rows, which results in a bootstrap "table-responsive" having the scroll bar off the bottom of the screen. To see the data that overflows to the sides you have to scroll to the bottom, move the scroll bar, then scroll back up again.

我有一个包含很多行的表格，这导致引导程序“表格响应”使滚动条离开屏幕底部。要查看溢出到两侧的数据，您必须滚动到底部，移动滚动条，然后再次向上滚动。

Have a look at this fiddle, http://jsfiddle.net/Lq4uk/1/

看看这个小提琴，http://jsfiddle.net/Lq4uk/1/

Here is the HTML code,

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

How can I make the horizontal scroll bar always visible?

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

Or, to look at it differently, how can I use the maximum amount of space available on the screen for the vertical size of the table?

或者，换个角度来看，如何将屏幕上的最大可用空间用于表格的垂直尺寸？

回答by web-tiki

You can use the wrapping div .table-responsiveto display the scrollbar:

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

1. Give it a height (percentage or not)
2. Set its overflow to auto

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

DEMO

演示

CSS :

CSS :

body,html{
    height:100%;
}

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

回答by Patrick Lüthi

Use the container .table-responsive! With that you can display the scrollbar.

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

You need to change overflow to auto and than it should work like a charm! :)

您需要将溢出更改为自动，然后它应该像魅力一样工作！:)

overflow: auto;