CSS Responsive Tables
CSS Responsive Tables
A responsive table will display a horizontal scrollbar 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 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 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 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
How to do it:
Wrap the <table> element in a <div> container.
Set the
overflow-x property to
auto for the <div> element:
Note: In OS X Lion (on Mac), scrollbars are hidden by default and are only shown when being used (even though "overflow:scroll" is set).
More Examples
Make a fancy table
This example demonstrates how to create a fancy table.
Add
and position a table caption
This example demonstrates how to add, and position a table caption.
CSS Table Properties
| Property | Description |
|---|---|
| border | Sets all the border properties in one declaration |
| border-collapse | Specifies whether or not table borders should be collapsed |
| border-spacing | Specifies the distance between the borders of adjacent cells |
| caption-side | Specifies the placement of a table caption |
| empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
| table-layout | Sets the layout algorithm to be used for a table |
