Comment appliquer un rayon de bordure aux lignes d’un tableau en HTML ?

Comment appliquer un rayon de bordure sur les lignes d'un tableau

Lors du style des tableaux HTML, les développeurs rencontrent souvent des limitations lorsqu'ils tentent d'appliquer des styles aux lignes d'un tableau (). Lors de la configuration des styles de bordure avec border-collapse, les bordures autour de éléments du tableau, il ne s'étend pas aux éléments éléments eux-mêmes.

Un problème courant survient lorsque l'on essaie d'appliquer le rayon de bordure (-moz-border-radius ou modern border-radius) aux lignes du tableau. Malheureusement, cette propriété ne peut pas être appliquée directement à éléments.

Solution :

Compte tenu de cette limitation, une solution de contournement est nécessaire pour obtenir des coins arrondis sur les lignes du tableau. La solution consiste à appliquer une stratégie de style de bordure aux éléments elements :

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

Cette méthode crée l'illusion de coins arrondis sur les lignes du tableau en définissant des styles et des rayons de bordure spécifiques sur les éléments éléments au début et à la fin de chaque ligne. La propriété border-collapse: Separate est cruciale, car elle permet d'appliquer des bordures à chaque cellule individuellement, permettant ainsi l'effet de style souhaité.

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!