Pourquoi les en-têtes de tableau collants perdent-ils leurs bordures et comment puis-je y remédier ?

Problème de style de bordure avec des éléments positionnés collants

En HTML, appliquer position: sticky à un élément peut créer un problème de rendu unique lorsqu'il s'agit aux frontières. Ce problème survient lorsque la bordure de l'élément collant interagit avec d'autres éléments de la mise en page.

Le problème :

Lorsqu'un élément est positionné de manière collante, il devient corrigé après que l'utilisateur défile au-delà d’un certain point. Cependant, les bordures de l'élément collant peuvent ne pas adhérer à l'élément si les conditions suivantes sont remplies :

• L'élément parent a border-collapse: collapse (la valeur par défaut).
• L'élément collant est un en-tête de tableau ().

Le Raison :

L'effondrement des bordures en CSS combine les bordures des cellules ou des éléments adjacents, créant une bordure unique. Dans le cas d'un en-tête de tableau collant, les bordures du des éléments peuvent être affectés par cet effondrement de la frontière, les faisant disparaître ou se comporter de manière inattendue.

La solution :

Pour résoudre ce problème, il existe deux approches :

1. Utilisez border-collapse: Separate

Changer border-collapse: Collapse en border-collapse: Separate garantit que les bordures ne s'effondrent pas. Chaque élément (y compris l'en-tête collant) aura ses bordures indépendantes.

2. Stylisez les bordures explicitement

Au lieu de vous fier à l'héritage CSS, appliquez explicitement des bordures à l'élément collant. Cela peut être fait en utilisant les propriétés suivantes :

• border-top : définit la bordure supérieure de l'en-tête collant.
• border-bottom : définit la bordure inférieure de l'en-tête collant. .
• border-left : définissez la bordure gauche de l'en-tête collant (pour la première colonne uniquement).
• border-right : définissez la bordure droite de l'en-tête collant (pour la dernière colonne uniquement).

Exemple :

table {
  border-collapse: separate;
}

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

table th:first-child {
  border-left: 2px solid;
}

table th:last-child {
  border-right: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

En mettant en œuvre l'une de ces solutions, vous pouvez vous assurer que les bordures de l'en-tête de votre tableau collant restent visibles et se comportent comme prévu, même lorsque l'utilisateur fait défiler la page.

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!