Comment puis-je ajouter une bordure inférieure à chaque ligne d'un tableau à l'aide de CSS ?

Ajout d'une bordure au bas de la ligne du tableau

Question

Ajouter une bordure au bas de chaque ligne du tableau à l'aide de CSS semble difficile. Le style direct des éléments tr ou l'application de règles CSS à tr n'ont pas produit le résultat souhaité. Existe-t-il un meilleur moyen d'y parvenir sans style en ligne ?

Solution

Pour réussir à ajouter une bordure au bas de chaque ligne du tableau à l'aide de CSS, vous pouvez utiliser la propriété border-collapse. En définissant cette propriété pour qu'elle soit réduite dans la règle CSS du tableau, les bordures du tableau fusionnent.

table { 
    border-collapse: collapse; 
}

Cela vous permet ensuite d'appliquer un style de bordure en utilisant la propriété border-bottom dans la règle CSS tr.

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

Exemple

Considérons une table 3x3 :

<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>

Appliquer les règles CSS donneront un tableau avec des bordures uniquement en bas de chaque ligne :

table {
  border-collapse: collapse;
}

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

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!