Styling table rows

To make the reading of longer tables a little easier a background color can be applied which alternates between odd and even rows.

CSS has built-in support form this, via a pseudo-selector, called nth-child.

table tr:nth-child(odd) td {
  background-color: rgba(225, 234, 240, 1);
}

table tr:nth-child(even) td {
  background-color: rgba(234, 240, 247, 1);
}

To make reading a single table row even easier the background color is changed again when the mouse pointer hovers over a row

table tr:hover td {
    background-color: rgb(200, 200, 200);
}

The above CSS has the following result

Since most (modern) browsers have support for this pseudo-selector so it should work fine for everyone…

If not check your browser version and ensure if is at the least of a version number mentioned in the table below for. Better yet upgrade to the latest available version of your browser of choice.