A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

To do this simply apply this css to table’s parent div :

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Whe the site is to huge and you want to add parent div by default with custom script, you need to put this javascript code in your js file or footer part of the site.

<script>
$( "table" ).wrap( "<div class='resp_table'></div>" );
</script>

Once the div is added, you need to put below code in css file :

.resp_table{
overflow-x:auto;
}

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though “overflow:scroll” or auto is set).

There are currently no comments.