Why does my table tr td:hover only work for the th header row?, not for any other rows?

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.

Chec开发者_开发技巧k out the code in JSFiddle.

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;
}

You need to modify the CSS code, as so:

#main_content table tr:hover td
{

        color: #666;
        border-right: 1px solid #eee;
        background-color: #ffcc11;
}

the :hover is the main thing.

Hope this helps

That's because your td's background color is overriding the tr's background color. So, you need to change the following

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

to 

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

#main_content table tr           // apply the color to the tr instead of the td this way it can get overridden
{
    background-color: #fafafa;
}

In CSS, 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;
}

as seen in http://jsfiddle.net/jhuntdog/NPrSU/12/embedded/result/