Table row border doesn't work in Firefox and Safari - html

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.

Answer 2

Add border-collapse:collapse to the table then you can add border to the tr.
Example:
table.myTable{
border-collapse:collapse;
}
table.myTable tr{
border:1px solid red;
}

Answer 3

Does this fix your problem?
tr.TableRow td {
border-bottom: 2px solid rgb(167,167,167);
border-top: 2px solid rgb(167,167,167);
}
It will add a border to all of the table data within any rows with the class TableRow. Adding the tr. at the start is good practice, as I assume you'll only be using this class with table row.
If you are applying this to multiple rows- you may also want to add border-collapse:collapse; which will collapse the borders into a single border.