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.

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.