Highlight Table Row using CSS

You can use CSS without any javascript to make the row of a table highlight on hover. All it requires is that the use the pseudo class :hover to add the effect to whatever html element you choose.

In this case we would add it to a table row using a stylesheet rule as in this CSS code example below:

        tr:hover {
          background-color: #ffff99;
        }

An Example of Table Row Highlighting on Hover

Here we have a working example of a table that highlights rows on hover that just uses CSS to achieve this effect. Just mouseover the table to see the effect in action.

The CSS Table Code

Copy the required CSS and HTML Code for this Table from the box below:

<style style="text/css">
  	.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	/* Define the default color for all the table rows */
	.hoverTable tr{
		background: #b8d1f3;
	}
	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
</style>

<table class="hoverTable">
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
	<tr>
		<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
	</tr>
</table>

Browser Support

Browser support for the :hover pseudo class on all applicable elements (in other words not just on links) is pretty solid for all modern browsers.

As always the question comes down to Internet Explorer and its support for once is surprisingly quite good here on older version of Internet Explorer. IE 7 and up will support the general use of the hover effect with one caveat.

The html page must have a <!DOCTYPE> on it. If it does not have a doctype then the hover effect will not work in pretty much all versions of IE. It's a small issue but it may be of consequence if you're stuck developing on a fairly inflexible system and you need to work on a page without a doctype.