Question

I have this code in jsfiddle and I would like the rows to highlight when I hover over them. I have tried the usual technique that works for me, but on this one, it only highlights the th header row, and not the table rows.

View the code in JSFiddle.

Basically, I’ve tried the usual:

table tr:hover{background-color: yellow;}

But this only highlights the table tr th Row only, and not the rows of the table, I have no idea why it’s doing this.

Check out the code in JSFiddle.

Answer 1

I’m not sure either why it doesn’t work as it is, but removing td in #main_content table tr td seems to do the job. So change

#main_content table tr td
{
    color: #666;
    border-right: 1px solid #eee;
    background-color: #fafafa;
}

to

#main_content table tr
{
    color: #666;
    border-right: 1px solid #eee;
    background-color: #fafafa;
}