La bordure autour de l'élément tr ne s'affiche pas?

Question

Il semble que Chrome/Firefox ne rende pas les bordures sur tr, mais il rend le bord si le sélecteur est table tr td.

Comment puis-je définir une bordure sur un tr?

Mon essai qui ne marche pas:

table tr {
  border: 1px solid black;
}

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

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

Ceci est une question similaire: Définir border à table tr, fonctionne dans tout sauf IE 6 & 7 , mais cela semble fonctionner partout sauf dans IE.

Answer 1

Ajoutez ceci à la feuille de style:

table {
  border-collapse: collapse;
}

JSFiddle .

La raison pour laquelle il se comporte de cette manière est en fait assez bien décrite dans la spécification :

Il existe deux modèles distincts pour définir des bordures sur des cellules de tableau en CSS. L’un est plus adapté aux frontières dites séparées autour des cellules individuelles, l’autre aux frontières continues d’un bout à l’autre du tableau.

... et plus tard, pour collapse paramètre:

Dans le modèle de bordure réductrice, il est possible de spécifier des bordures qui entourent tout ou partie d'une cellule, d'une ligne, d'un groupe de lignes, d'une colonne et d'un groupe de colonnes.