Sep 19 2015 0

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

Column 1 Column 2 Column 3
Row 1, Col1 Row 1, Col 2 Row 1, Col 3
Row 2, Col1 Row 2, Col 2 Row 2, Col 3
Row 3, Col1 Row 3, Col 2 Row 3, Col 3
Row 4, Col1 Row 4, Col 2 Row 4, Col 3
Row 5, Col1 Row 5, Col 2 Row 5, Col 3
Row 6, Col1 Row 6, Col 2 Row 6, Col 3

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.

Browser Version
Google Chrome 4.0
Internet Explorer 9.0
Firefox 3.5
Safari 3.2
Opera 9.6

Previous post
Modification to Ball Dumper Module When the Load Shifter was shifting the buckets it tended to get held by the grabber from the ball dumper. When the mover finally gets freed it jumps
Next post
keep calm and its just a test
This blog is powered by Blot