Question

Currently, when I create a table, and I mouseover a cell, that entire row is highlighted. I’m trying to make it so that it is only the immediate cell. Here’s all the CSS code that pertains to tables in my stylesheet:

table{margin:.5em 0 1em;}
table td,table th{text-align:center;border-right:1px solid #fff;padding:.4em .8em;}
table th{background-color:#5e5e5e;color:#fff;text-transform:uppercase;font-weight:bold;border-  bottom:1px solid #e8e1c8;}
table td{background-color:#eee;}
table th a{color:#d6f325;}
table th a:hover{color:#fff;}
table tr.even td{background-color:#ddd;}
table tr:hover td{background-color:#fff;}

table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;}

I know it’s probably a simple fix but I can’t find where to make it work. Everything I try just kills the mouseover effect entirely rather than making it the way I want it.

Answer 1

Change

table tr:hover td{background-color:#fff;}

To

table td:hover <strike>td</strike>{background-color:#fff;}

This should highlight the cell and not the whole row.

Update tr:hover was mentioned twice. Also it should be td:hover, not td:hover td. This should work:

table{margin:.5em 0 1em;}
table td,table th{text-align:center;border-right:1px solid #fff;padding:.4em .8em;}
table th{background-color:#5e5e5e;color:#fff;text-transform:uppercase;font-weight:bold;border-  bottom:1px solid #e8e1c8;}
table td{background-color:#eee;}
table th a{color:#d6f325;}
table th a:hover{color:#fff;}
table tr.even td{background-color:#ddd;}
table td:hover {background-color:#fff;}

table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle td{border:0;background:none;background-color:transparent;}