CSS: Tables properties
Table Borders
To specify table borders in CSS, use the border
property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.
Collapse Table Borders
The border-collapse
property sets whether the table borders should be collapsed into a single border:
If you only want a border around the table, only specify the border
property for <table>:
Table Width and Height
Width and height of a table are defined by the width
and height
properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
Horizontal Alignment
The text-align
property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
Vertical Alignment
The vertical-align
property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Table Padding
To control the space between the border and the content in a table, use the padding
property on <td> and <th> elements:
Horizontal Dividers
First Name | Last Name | Savings |
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Add the border-bottom
property to <th> and <td> for horizontal dividers:
Hoverable Table
Use the :hover
selector on <tr> to highlight table rows on mouse over:
First Name | Last Name | Savings |
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Striped Tables
First Name | Last Name | Savings |
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
For zebra-striped tables, use the nth-child()
selector and add a background-color
to all even (or odd) table rows:
Table Color
The example below specifies the background color and text color of <th> elements:
First Name | Last Name | Savings |
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:
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 |
Add a container element (like <div>) with overflow-x:auto
around the <table> element to make it responsive:
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).
Last updated