Table row border doesn't work in Firefox and Safari

Question

I wanted the table row to have a border on the bottom and top. The code below works in IE but not in Firefox or Safari! Kindly help!

HTML

 <tr class='TableRow'>

CSS

.TableRow{
   border-bottom: 2px solid rgb(167,167,167);
   border-top: 2px solid rgb(167,167,167);
  }

Answer 1

As far as I know, you cannot set borders to table rows through CSS. But I will suggest you a workaround to this: Set the borders to the cells inside the row, and then use cellspacing="0". Here is the CSS:

.TableRow td{
   border-bottom: 2px solid rgb(167,167,167);
   border-top: 2px solid rgb(167,167,167);
}

And a sample HTML would be:

<table cellspacing="0">
    <tr class="TableRow">
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The first row will be the one with borders.

Hope that helps.

EDIT: I tried your code and didn't show the border in any browser, including IE.