Pourquoi la bordure inférieure de la ligne de mon tableau n'apparaît-elle pas à l'aide de CSS ?

Comment ajouter des bordures au bas des lignes du tableau

Vous avez un tableau 3x3 et vous souhaitez ajouter une bordure au bas de chaque ligne. Vous avez essayé d'ajouter l'attribut style directement au éléments, mais cela n'a pas fonctionné. Vous avez ensuite ajouté du CSS comme ceci :

tr {
border-bottom: 1pt solid black;
}

Mais cela n'a toujours pas fonctionné. Vous préférez utiliser CSS, vous n'avez donc pas besoin d'ajouter un attribut de style à chaque ligne.

Le problème est que vous n'avez pas ajouté border-collapse:collapse à votre règle de table. Cette propriété indique au navigateur de réduire les bordures des cellules adjacentes. Sans cela, les bordures seront dessinées les unes sur les autres, ce qui rendra difficile la visualisation des lignes.

Pour résoudre le problème, ajoutez border-collapse:collapse à la règle de votre table :

table {
border-collapse: collapse;
}

Voici un exemple :

table {
border-collapse: collapse;
}

tr {
border-bottom: 1pt solid black;
}

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Cela ajoutera une bordure noire de 1 pt au bas de chaque ligne de votre tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!