Outline table row on hover

Question

I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using outline but it doesn't play nice with :hover in webkit.

http://jsfiddle.net/S9pkM/2/

Imagine your standard table html. Some tr's with some td's. Hovering over a row should highlight its border in red.

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

I am open to alternate approaches, but I am stuck with the table structure. No inserting additional html besides standard <table> <tr> <td>

Answer 1

I've been facing this same problem and finally found a simpler solution here.

You can use this CSS trick ( border-style: double; ) that works for 1px borders:

#mytable tr.row:hover td
{
    border-style: double;
    border-color: red;
}

This will make your border-color work (be the top most one) no matter what. :-)

Answer 2

For 1px borders see Leniel's solution that uses border-style: double. This is much simpler. A double border is one that shows a 1px line for the inside and outside edges of the border. This doesn't do anything for a 1px border, but on >1px there is a gap.

For borders >1px you remove the bottom border for all of the <td>'s with border-bottom: 0. The top borders of the other cells will keep everything looking the way they should, except for the last row. The last row we fix with tr:last-child td { border-bottom: your border style }. Finally in your hover pseudoclass you set the bottom border.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

Answer 3

why not to use separate border? http://jsfiddle.net/S9pkM/6/

Answer 4

Just put this code into your head section:

<style>
  table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;}
  table td:hover {border:2px solid red; }
</style>