Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save myasseen/5d85770a2f88b5d32ce8 to your computer and use it in GitHub Desktop.
Save myasseen/5d85770a2f88b5d32ce8 to your computer and use it in GitHub Desktop.
Table Columns with Alternating Colors using CSS3
.tableCol{
width:100%;
border-collapse:collapse;
}
.tableCol td{
padding:7px; border:#4e95f4 1px solid;
}
/* improve visual readability for IE8 and below */
.tableCol tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD table columns */
.tableCol tr td:nth-child(odd){
background: #b8d1f3;
}
/* Define the background color for all the EVEN table columns */
.tableCol tr td:nth-child(even){
background: #dae5f4;
}
<table class="tableCol">
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment