Paradox Designs

Many advanced web designers know of this trick, but there doesn’t seem to be any documentation about it anywhere. It is a simple css trick to allow a user viewing a table with no cell borders to see what all lies in a row.

The trick is to make it so when a user hovers over a cell, the entire row changes some fundamental manner (background color, font size, font color, etc) to show that those cells are connected. While you could do this with Javascript, a better alternative is to use CSS[1. Using CSS when avalible to do what is usually done with Javascript is ALWAYS better, as it is faster and usually easier to debug]. When you have a well defined table, add this to the table’s css:

1
2
3

tr:hover td {
background: blue;
}

You don’t have to use a background to do the changing, you can use any entry you want there, i just used background for an example.
This will make it so when a user hovers over a row, all the cells in that row change their background colors.

This makes it easy for a user to identify elements, while still keeping tables stylish. If you have headers, you can do a similar trick, but you want to use a different hover color. To do that, replace the td portion with th