CSS : bordures entre les colonnes du tableau uniquement

Question

Existe-t-il un moyen, à l'aide de CSS, d'afficher des bordures dans un tableau entre les colonnes uniquement (pas sur les bords extérieurs) ?

Answer 1

Je sais que c'est une vieille question, mais il y a une solution simple, solution à une ligne qui fonctionne de manière cohérente pour Chrome, Firefox, etc., ainsi que pour IE8 et les versions ultérieures (et, pour la plupart, fonctionne également sur IE7 - cf. http://www.quirksmode.org/css/selectors/ pour plus de détails) :

table td + td { border-left:2px solid red; }

Le résultat est quelque chose comme ceci :

Col1 | Col2 | Col3

Ce qui fait que cela fonctionne, c'est que vous définissez une bordure uniquement sur les cellules de tableau qui sont adjacentes à une autre cellule de tableau. En d'autres termes, vous appliquez le CSS à toutes les cellules d'une rangée, sauf à la première.

En appliquant une bordure gauche du deuxième au dernier enfant, on donne l'impression que la ligne se trouve "entre" les cellules.

Answer 2

Edit 2

Erasmus a une meilleure phrase en dessous de

---

Pas sans les sélecteurs css délicats, les balises supplémentaires et autres.

Quelque chose comme ceci pourrait faire l'affaire (en utilisant des sélecteurs CSS) :

table {
    border:none;
    border-collapse: collapse;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table td:first-child {
    border-left: none;
}

table td:last-child {
    border-right: none;
}

Modifier

Pour clarifier le coup du commentaire de @jeroen, tout ce dont vous auriez vraiment besoin est :

table { border: none; border-collapse: collapse; }
table td { border-left: 1px solid #000; }
table td:first-child { border-left: none; }

Answer 3

Les bordures des tables sont toujours un peu floues. Une possibilité serait d'ajouter une déclaration border-right à chaque cellule du tableau, à l'exception de celles de la colonne la plus à droite. Si vous utilisez un quelconque espacement de tableau, cela ne fonctionnera pas très bien.

Une autre option serait d'utiliser une image d'arrière-plan de 1px de haut avec les bordures à l'intérieur, mais cela ne fonctionnera que si vous pouvez garantir la largeur de chaque cellule à tout moment.

Une autre possibilité est d'expérimenter avec colgroup / col. La dernière fois que j'y ai jeté un coup d'œil, le support inter-navigateur était assez mauvais, mais il a pu s'améliorer depuis : http://www.webmasterworld.com/forum83/6826.htm

Answer 4

Vous devez définir un border-right sur les td's puis ciblez les derniers td's d'une rangée pour mettre la bordure en place. none . Façons de cibler :

1. Définir une classe sur le dernier td de chaque ligne et utiliser cette
2. S'il s'agit d'un nombre fixe de cellules et que l'on ne vise que les navigateurs récents, on peut utiliser une largeur de 3 cellules. td + td + td
3. Ou mieux (avec les nouveaux navigateurs) td:last-child

Answer 5

Je l'ai utilisé dans une feuille de style pour trois colonnes séparées par des bordures verticales et cela a bien fonctionné :

#column-left {
     border-left: 1px solid #dddddd;
}
#column-center {
     /*no border needed/*
}
#column-right {
     border-right: 1px solid #dddddd;
}

La colonne de gauche reçoit une bordure à droite, la colonne de droite reçoit une bordure à gauche et la colonne du milieu est déjà prise en charge par la gauche et la droite.

Si vos colonnes se trouvent à l'intérieur d'un div/wrapper/table/etc... n'oubliez pas d'ajouter un espace supplémentaire pour tenir compte de la largeur des bordures.