La border-collapsepropriété est à utiliser sur
display: table display: inline-table
separate(par défaut) - dans lequel toutes les cellules du tableau ont leurs propres bordures indépendantes et il peut également y avoir un espace entre ces cellules.collapse- dans lequel l'espace et les bordures entre les cellules du tableau se réduisent de sorte qu'il n'y ait qu'une seule bordure et aucun espace entre les cellules.
Quand border-collapsec'est collapse, il est à noter que les propriétés comme border-spacinget border-radius(sur les bordures réelles) ne font rien. Vous en aurez besoin border-collapse: separate;si vous avez besoin de l'une ou l'autre de ces choses.
Voici un exemple où vous pouvez permuter entre les deux:
Voir la
table de plumes avec des cellules arrondies par Chris Coyier (@chriscoyier)
sur CodePen.
Prise en charge du navigateur
éléments (ou éléments conçus pour se comporter comme un tableau à travers ou). Il y a deux valeurs:| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Travaux | Travaux |