If the screen size is insufficient to accommodate the entire content, a responsive table will present a horizontal scroll bar for navigation.
|
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 |
Wrap the <table> element with a container element (such as <div>) and set its overflow-x:auto property to auto to create a responsive design.
Example
| <div style=”overflow-x:auto;”> <table> … table content … </table> </div> |
| Note: On OS X Lion (Mac), scrollbars are hidden by default and only appear when in use, even if “overflow: scroll” is set. |
|
Property |
Description |
|
border |
Specifies all the border properties in a single declaration. |
|
border-collapse |
Indicates whether table borders should be collapsed or separated. |
|
border-spacing |
Defines the spacing between the borders of adjacent cells. |
|
caption-side |
Determines the position of a table caption. |
|
empty-cells |
Indicates whether borders and background should be displayed on empty cells in a table. |
|
table-layout |
Determines the layout algorithm to be used for a table. |
