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: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-collap开发者_运维技巧se:collapse;">
  <tr style="border:1px solid black">
    <td>Cell_1</td>
    <td>Cell_2</td>
  </tr>
</table>

---

You can try using outline instead.

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

Have a look: http://jsfiddle.net/dWWkx/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.

---

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>

---

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>