Border-collapse: collapse

Résolu

Herve_be Messages postés 1176 Statut Membre -
pseudo - 10 oct. 2025 à 13:04

Bonjour,

Dans une table je souhaite avoir une bordure seulement à gauche, j'ai donc codé

<td style="border-left: 1px solid; border-collapse: collapse;" >xxx</td>
<td style="border-left: 1px solid; border-collapse: collapse;" >yyy</td>

J'obtiens bien une bordure à gauche mais les 2 bordures des 2 cellules ne se touchent pas comme ceci

│ xxx

│ yyy

Comment faire ?

Afficher la suite

A voir également:

Border-collapse: collapse
Border maker - Télécharger - Retouche d'image

1 réponse

Réponse 1 / 1

pseudo

Bonjour,

La propriété border-collapse s'applique sur l'élément table et pas l'élément td :

<table class="table-collapse">
  <tr>
    <td>xxx</td>
  </tr>
  <tr>
    <td>xxx</td>
  </tr>
</table>

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

.table-collapse td {
  border-left: 1px solid black;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Herve_be Messages postés 1176 Statut Membre 11

Avant de poser la question j'avais cherché sur le Net et avais trouvé ceci

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

J'ai pensé que border-collapse s'appliquait aussi à TD mais tu as raison, en le mettant sur "Table" ça fonctionne, merci.

Puis-je en profiter pour te demander comment faire pour que le texte ne soit pas collé à la bordure ?
Je ne m'en sors jamais avec margin et padding.

pseudo > Herve_be Messages postés 1176 Statut Membre

Tu peux essayer avec un padding sur les éléments td :

https://jsfiddle.net/gbcq862w/

Discussions similaires

Border d'un button

Forum HTML