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

108

Il semble que Chrome / Firefox ne rend pas les bordures tr, mais il restitue la bordure si le sélecteur l'est table tr td.

Comment définir une bordure sur un tr?

Mon essai, qui ne fonctionne pas:

table tr {
  border: 1px solid black;
}
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

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

C'est une question similaire: définir la bordure de la table tr, fonctionne dans tout sauf IE 6 & 7 , mais cela semble fonctionner partout sauf pour IE.

edi9999
la source
2
J'utilise Firefox et je ne vois pas de bordure
Speedysnail6

Réponses:

256

Ajoutez ceci à la feuille de style:

table {
  border-collapse: collapse;
}

JSFiddle .

La raison pour laquelle il se comporte de cette façon est en fait assez bien décrite dans la spécification :

Il existe deux modèles distincts pour définir les bordures des cellules de tableau en CSS. L'un est le plus approprié pour les bordures dites séparées autour des cellules individuelles, l'autre convient pour les bordures continues d'un bout à l'autre du tableau.

... et plus tard, pour le collapseréglage:

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

raina77ow
la source
2
Pourquoi exactement la frontière était-elle cachée?
edi9999
4
Parce que c'est ainsi que separatefonctionne le modèle de bordure de tableau par défaut: vous spécifiez des bordures pour chaque cellule. Je mettrai à jour la réponse avec des citations de la documentation.
raina77ow
1
@ edi9999 - Je recommande d'utiliser une feuille de style de réinitialisation. Vérifiez ceci sur http://www.cssreset.com/
Black Sheep
2
L'explication spécifique de la raison pour laquelle la bordure a été masquée est cette déclaration dans la spécification CSS citée, présentée comme s'appliquant dans le modèle de bordures séparées: «Les lignes, colonnes, groupes de lignes et groupes de colonnes ne peuvent pas avoir de bordures (c'est-à-dire que les agents utilisateurs doivent ignorer la bordure propriétés de ces éléments). »
Jukka K. Korpela
Jouer avec votre exemple de violoneux a aidé, merci;)
Zeek2