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

Question

I am trying to add borders around certain rows of a table that change color when the mouse enters a row. However, I do not see the border at all, unless border-collapse:collapse; , but I need to avoid crash-crash, because in some cases the border is visible on the left, right and bottom, but not on top (probably because I cannot have a / margin when using border collapse).

Is there any 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 use outline instead.

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

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

Answer 2

As far as I know, you cannot put a border on a table row, but you can in a table cell ( <td> ). With some creative borders from left and right to right, with a distance between cells of 0, you should be able to achieve the appearance of a border around the entire row.

Answer 3

I had exactly the same problem and found this workaround:

 <tr class="border_bottom"> 

CSS

 tr.border_bottom td { border:1pt solid black; } 

Found it here and adjusted: Add border-bottom to the table row <tr>

Answer 4

try the following:

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