Saturday 11 April 2020

EVEN AND ODD RULES

One way to improve the readability of large tables is to color alternating rows. For example, the table below has a light gray background for the even rows and white for the odd ones. The rules for that are extremely simple:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}


Month'94'95'96'97'98'99'00'01'02
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311
In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords 'even' and 'odd' are just convenient shorthands. For example, for a long list you could do this:
li:nth-child(5n+3) {font-weight: bold}
This says that every 5th list item is bold, starting with the 3rd one. In other words, the items numbered 3, 8, 13, 18, 23, etc., will be bold.

No comments:

Post a Comment