CSS3 styling for tables

   —   
This article gives you instructions on how to style your tables or any other items generated by repeaters/grids etc. without rendering extra CSS classes into it.
In most of cases you would want to colorize odd or even rows/columns in your table or distinguish backgrounds of items from your repeater. Since CSS version 3, you can take advantage of the selector property: nth-child(n) to set a different background color:

Set a different background to odd/even rows:

tr:nth-child(odd) {
background: #CCC;
}
tr:nth-child(even) {
background: #999;
}




Set a different background to odd/even columns:

td:nth-child(odd) {
background: #CCC;
}
td:nth-child(even) {
background: #999;
}




Set a different background to all rows except first two rows:

tr {
background: #CCC;
}
tr:nth-child(n+3) {
background: #999;
}




Set a different background to every third row:

tr {
background: #CCC;
}
tr:nth-child(3n) {
background: #999;
}


-jh-


Applies to: Kentico CMS 6.x
Share this article on   LinkedIn