Pourquoi mes bordures ne s'affichent-elles pas sur les éléments positionnés de manière collante ?

Les styles de bordure ne s'affichent pas sur les éléments avec une position collante

En CSS, la position "collante" permet à un élément de rester fixe à l'écran même lorsque le contenu environnant défile. Cependant, lorsqu'elles sont appliquées à un élément avec des bordures, les bordures peuvent ne pas apparaître comme prévu.

Cause :

Ce problème survient en raison de l'utilisation du "border- propriété "effondrement". Lorsqu'elle est définie sur « Réduire », les bordures entre les éléments adjacents sont combinées et réparties entre ces éléments. Dans le cas d'éléments avec une position collante, la bordure supérieure de l'élément collant peut fusionner avec la bordure de l'élément contenant (par exemple, le tableau), tandis que la bordure inférieure peut fusionner avec la bordure de l'élément suivant.

Solution :

Pour résoudre ce problème, vous pouvez modifier la propriété "border-collapse" de "collapse" à "separate". Cela empêchera les bordures d'être combinées et garantira que chaque élément a sa propre bordure distincte.

Vous pouvez également définir explicitement la bordure de chaque élément individuel à l'aide de règles CSS telles que :

table thead th {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

Cela garantit que la bordure de l'en-tête du tableau collant est appliquée directement aux cellules sans être affectée par l'effondrement de la bordure. propriété.

Exemple :

Implémentez les styles CSS suivants pour obtenir le comportement souhaité :

table {
  border-collapse: separate;
}

table thead th {
  position: sticky;
  top: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

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!