A borda ao redor do elemento tr não aparece?

Parece que o Chrome / Firefox não renderiza bordas tr, mas renderiza a borda se o seletor estiver table tr td.

Como posso definir uma borda em um tr?

Minha tentativa, que não funciona:

table tr {
  border: 1px solid black;
}

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

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

Esta é uma questão semelhante: definir a borda da tabela tr, funciona em tudo, exceto no IE 6 e 7 , mas parece funcionar em qualquer lugar, exceto no IE.

Adicione isto à folha de estilo:

table {
  border-collapse: collapse;
}

JSFiddle .

O motivo pelo qual ele se comporta dessa maneira é, na verdade, muito bem descrito na especificação :

Existem dois modelos distintos para definir bordas nas células da tabela em CSS. Um é mais adequado para as chamadas bordas separadas em torno de células individuais, o outro é adequado para bordas que são contínuas de uma extremidade da tabela à outra.

... e mais tarde, para collapsedefinir:

No modelo de borda recolhível, é possível especificar bordas que circundam toda ou parte de uma célula, linha, grupo de linhas, coluna e grupo de colunas.