Maison >interface Web >tutoriel CSS >Comment les bordures du tableau fusionnent-elles après la définition de border-collapse:collapse ?

Comment les bordures du tableau fusionnent-elles après la définition de border-collapse:collapse ?

黄舟
黄舟original
2017-06-30 09:36:082967parcourir

J'ai rencontré une bordure qui nécessitait des coins arrondis, puis j'ai découvert qu'après avoir défini border-collapse:collapse, border-radius:5px ne fonctionnait pas de diverses manières et j'ai découvert qu'il s'agissait du CSS lui-même. existe, et les deux ne peuvent pas être mélangés. D’autres méthodes ont donc été utilisées pour obtenir des coins arrondis de la table.
Mais maintenant, je veux savoir comment la bordure du tableau et les bordures de td et th sont fusionnées en une seule bordure ?
Semblable à l'intersection entre le coin supérieur gauche du tableau et le premier, une fois les deux bordures fusionnées, la bordure du tableau ou la bordure du ème sera-t-elle conservée ? Si c'est la bordure du premier ème qui est conservée, alors pourquoi la définition du rayon de bordure dans le coin supérieur gauche du premier ème n'a-t-elle toujours aucun effet ?

Laxative-v-, il se trouve que vendredi dernier, lorsque j'ai partagé dans le groupe, j'ai mentionné la priorité de l'effondrement des bordures La section w3c sur les tables contient des instructions pour la bordure. -collapse : Réduire la gestion des conflits.

Il y a deux exemples détaillés dans le document, qui sont très intuitifs.

Ici, je résume : (premisse border-collapse: collapse)
1 border-style = [hidden|none]
hidden a la priorité la plus élevée, quand deux. les bordures génèrent une agrégation, tant que l'une ou l'autre est définie sur cachée, le résultat final est qu'aucune bordure ne sera affichée ; aucune n'a la priorité la plus basse. Tant que l'une est définie sur aucune, l'autre le sera. être utilisé directement pour le résultat.

Normalement, border-style: Hidden et border-style: none n'affichent pas la bordure. Il y a une différence lorsque border-collapse: Collapse est utilisé.

2. Si border-width est incohérent, la plus grande largeur de bordure prévaudra
3. la largeur est la même, utilisez cette priorité : 'double', 'solide', 'tiret', 'pointillé', 'crête', 'début', 'groove', 'encart'.
Quand la bordure Quand. la couleur est juste différente : selon la structure hiérarchique du DOM, le style de bordure de l'élément enfant est meilleur que le style de bordure de l'élément parent. [cell > row > rowgroup > table]; Si la structure hiérarchique est une relation fraternelle, prenez table comme exemple, le côté gauche et le côté supérieur sont prioritaires.

Cependant, ce qui est particulièrement intéressant c'est que la spécification ne précise pas la logique de repli du coin, donc les performances sont différentes sous Chrome et Firefox. .
Peut être ouvert sous chrome et firefox respectivement : BQEMea
L'image ci-dessous est un brother td, seule la couleur est incohérente, puis la gauche est chrome, la droite est firefox

Comment les bordures du tableau fusionnent-elles après la définition de border-collapse:collapse ?

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