Maison >interface Web >tutoriel CSS >Pourquoi mes en-têtes de tableau collants perdent-ils leurs bordures et comment puis-je y remédier ?

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

Mary-Kate Olsenoriginal: 2024-11-29 07:46:10608parcourir

Why Do My Sticky Table Headers Lose Their Borders, and How Can I Fix It?

Les styles de bordure disparaissent sur les en-têtes de tableau collants

Lorsque vous essayez de styliser les bordures d'un en-tête de tableau avec l'attribut position : collant, vous pouvez rencontrer un problème où les frontières disparaissent. Ce problème vient de l’utilisation de border-collapse:effondrement.

En CSS, la propriété border-collapse détermine la façon dont les bordures des tableaux adjacents doivent interagir. Lorsque border-collapse est configuré pour s'effondrer, les bordures entre les cellules sont supprimées, créant l'impression qu'une seule bordure entoure tous les éléments adjacents.

Dans ce cas, l'utilisation de border-collapse:effondrement peut interférer avec le résultat souhaité. effet de position : collant. Lorsque les bordures s'effondrent, les bordures supérieure et inférieure du les balises se répandent dans les éléments environnants, y compris le tableau (

) lui-même et la ligne suivante ().

Pour résoudre ce problème, vous pouvez utiliser border-collapse : séparer en conjonction avec des styles de bordure soigneusement conçus pour obtenir l'effet souhaité. Voici quelques règles CSS révisées qui garderont les bordures intactes et fixes :

/* Reset border collapse to separate */
border-collapse: separate;

/* Apply both top and bottom borders to the <th> */
table th {
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* For cells, apply the border to one side only */
table td {
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Apply a left border on the first <td> or <th> in a row */
table th:first-child,
table td:first-child {
  border-left: 2px solid;
}

Avec ces modifications, les bordures s'attacheront correctement aux éléments d'en-tête du tableau (

), resteront fixes tout en défilement et conserver une apparence réduite.

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!

css while Attribute Property this position border table tr th issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je personnaliser dynamiquement les paramètres d'animation CSS ?Article suivant：Comment puis-je personnaliser dynamiquement les paramètres d'animation CSS ?

Articles Liés

Voir plus