How to save horizontal scrollbar in a flexible table?

Question

I have a table with a lot of rows, which causes the table-responsive bootstrap to have a scroll bar at the bottom of the screen. To view data that overflows to the sides, you must scroll to the bottom, move the scroll bar, and then scroll back again.

Take a look at this script, 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 scrollbar always visible?

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

Answer 1

You can use the wrapping div .table-responsive to display the scroll bar:

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

Demo

CSS:

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

Answer 2

Use a container .table-responsive! In doing so, you can display the scroll bar.

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

 overflow: auto;