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

Question

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/

Here is the HTML code,

<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?

Answer 1

In your CSS add these lines -

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