Border around tr element doesn't show?

It seems like Chrome/Firefox do not render borders on tr, but it renders the border if the selector is table tr td.

How can I set a border on a tr ?

My try, which doesn't work:

table tr {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

This is a similar question: https://stackoverflow.com/questions/583539/set-border-to-table-tr-works-in-everything-except-ie-6-7 , but it seems to work everywhere except for IE.

Add this to the stylesheet:

table {
  border-collapse: collapse;
}

JSFiddle.

The reason why it behaves this way is actually described pretty well in the specification:

> There are two distinct models for setting borders on table cells in > CSS. One is most suitable for so-called separated borders around > individual cells, the other is suitable for borders that are > continuous from one end of the table to the other.

... and later, for collapse setting:

> In the collapsing border model, it is possible to specify borders that > surround all or part of a cell, row, row group, column, and column > group.

Besides what top answer says, you should also make sure your border has visible style, for example:

border-style: solid;

if you are adding custom styles to some website.