web-dev-qa-db-fra.com

Définir la bordure intérieure du tableau en HTML

Comment définir la "bordure intérieure" - la frontière entre les différentes cellules.

En définissant des attributs de style, je parviens à contrôler la bordure extérieure, mais la bordure intérieure reste juste la même couleur grise et la même largeur. Quels attributs dois-je modifier pour contrôler la bordure intérieure?

19
ripper234

Pour le balisage de table ordinaire, voici une courte solution qui fonctionne sur tous les appareils/navigateurs sur BrowserStack, sauf IE 7 et ci-dessous:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Pour IE 7 support, ajoutez ceci:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Un cas de test peut être vu ici: http://codepen.io/dalgard/pen/wmcdE

13
dalgard

Vous devez styliser le <td> élément.

Jetez un œil au site Web du W3C

4
daLizard