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

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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

4 Il y a quelques semaines By DDD

Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

3 Il y a quelques semaines By DDD

Inzoi: Comment postuler à l'école et à l'université

1 Il y a quelques mois By DDD

Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semaines By DDD

Où trouver la clé du bureau du site dans Atomfall

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7909

15

Tutoriel Java

1652

14

Tutoriel CakePHP

1411

52

Tutoriel Laravel

1303

25

Tutoriel PHP

1248

29

Afficher plus

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Comment utiliser la grille CSS pour les en-têtes et pieds de page collants Apr 02, 2025 pm 06:29 PM

CSS Grid est une collection de propriétés conçues pour faciliter la mise en page qu'elle ne l'a jamais été. Comme tout, il y a un peu une courbe d'apprentissage, mais Grid est

Fontes variables de polices Google Apr 09, 2025 am 10:42 AM

Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence

See all articles

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved