Created
February 11, 2015 09:09
-
-
Save myasseen/5d85770a2f88b5d32ce8 to your computer and use it in GitHub Desktop.
Table Columns with Alternating Colors using CSS3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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