Table top border won't color

Question

Maybe I'm overlooking something here, but I can't figure out how to color the top-borders of the td-elements.

  table {
    border-collapse:collapse;
  }

  td {
    border: 2px solid #000;
  }

  tr:hover td {
    border-color: #F55;
  }

It works as expected, except the top border isn't colored.

http://jsfiddle.net/45CSj/

Answer 1

Because you are using border-collapse: collapse; instead use border-collapse: separate; with border-spacing set to 0

table {
    border-collapse: separate;
    border-spacing: 0;
}

Demo

Answer 2

This might be useful-

table{border-collapse: separate; border-spacing: 0px}

table td{border: 1px solid #000;}

tr:hover td {border: 1px solid #F55; }

but this will show double border around the cells/rows.