CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Duncan Drennan
Duncan Drennan

Reputation: 920

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

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?

Upvotes: 18

Views: 22136

Answers (2)

Alimur Razi Rana
Alimur Razi Rana

Reputation: 480

In your CSS add these lines -

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

Upvotes: 8

Patrick L&#252;thi
Patrick L&#252;thi

Reputation: 324

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

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

overflow: auto;

Upvotes: 1

Related Questions