Is it possible to have a border around a table row in some way?

Question

I'm trying to add borders around specific table rows which change it's colors when the mouse enters the row. However, I dont see a border at all unless using border-collapse:collapse; but I have to avoid border-collapse, since in some cases the border is visible left, right and at bottom but not on top (probably because I cannot have padding/margin when using border-collapse).

Is there a way to achieve this?

<table style="border-collapse:collapse;">

<tr style="border:1px solid black">

<td>Cell_1</td>

<td>Cell_2</td>

</tr>

</table>

Answer 1

You can try using outline instead.

tr:hover {
    outline: 1px solid #999;
}

Have a look: http://jsfiddle.net/dWWkx/3/

Answer 2

try this:

<table style="">

<tr style="display:block;border:1px solid black">

<td>Cell_1</td>

<td>Cell_2</td>

</tr>

<tr style="display:block;border:1px solid black">

<td>Cell_1</td>

<td>Cell_2</td>

</tr>

</table>

Answer 3

As far as I know you can't put a border on a table row, but you can on the table cell (<td>). With some creative border-right and border-left, with a cell-spacing of 0, you should be able to achieve the appearance of a border around the whole row.