Is It Possible To Have A Border Around A Table Row In Some Way?

I'm trying to add borders around specific table rows which change it's colors when the mouse enters the row. However, I don't see a border at all unless using border-collapse:colla

Solution 1:

You can try using outline instead.

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

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

Solution 2:

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.

Solution 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 it: Add border-bottom to table row <tr>

Solution 4:

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>