Comment ajouter des coins arrondis aux lignes d'un tableau en HTML ?

Style des lignes de tableau avec rayon de bordure

Dans les tableaux HTML, l'attribut L'élément représente une ligne de tableau. Bien qu'il soit possible d'ajouter une bordure solide aux lignes du tableau à l'aide de border-collapse, l'ajout de coins arrondis aux lignes présente un défi.

Pour surmonter cette limitation, vous pouvez utiliser les styles CSS suivants :

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

Supprimez les bordures supérieure et gauche pour la plupart des éléments éléments.

• Appliquez des coins arrondis aux coins supérieur gauche et supérieur droit de la première rangée.
• Appliquez des coins arrondis aux coins inférieur gauche et inférieur droit de la dernière rangée.
• Restaurez la bordure supérieure pour éléments de la première ligne et la bordure gauche pour éléments dans la première colonne.

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!