Skip to main content

CSS Table Style

Some CSS style that you can apply to HTML tables.

Table Padding​

To control the space between the border and the content in a table, use the padding property on <th> and <td> elements:

Example:

th, td {  
    padding:  15px;  
    text-align:  left;  
}

Horizontal Dividers​

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example:

th, td {  
    border-bottom:  1px solid #ddd;  
}

Hoverable Table​

Use the :hover selector on <tr> to highlight table rows on mouse over:

Example:

th, td {  
    border-bottom:  1px solid #ddd;  
}

Striped Tables​

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example:

tr:nth-child(even) {background-color:  #f2f2f2;}

Table of Contents