Disposition arme secrète n ° 1: la propriété de la table CSS

CSS display: table Attributs: un outil puissant pour résoudre les problèmes de mise en page

Points de base:

Les attributs
• CSS table sont puissants, peuvent résoudre plusieurs problèmes de disposition et sont compatibles avec tous les navigateurs modernes. Il permet aux éléments HTML de fonctionner comme des éléments de table, fournissant une solution commune à des problèmes de mise en page et d'alignement complexes.
• Les propriétés CSS table peuvent être utilisées pour créer des boîtes de contour, des dispositions simples à l'ancienne et des dispositions adaptatives avec orchestration de contenu. Il est particulièrement utile dans les conceptions réactives, permettant aux éléments de redimensionner et de positionner en fonction de la taille de l'écran de l'utilisateur.
• Bien que l'attribut CSS table présente de nombreux avantages, il a également certaines limites. Il a moins de flexibilité dans la création de dispositions complexes par rapport aux autres propriétés d'affichage et ne fonctionne pas bien avec certaines propriétés CSS telles que float et position. Cependant, dans de nombreux cas, les avantages de l'utilisation de l'attribut table l'emportent sur ses inconvénients.

À l'heure actuelle, Flexbox peut être une nouvelle technologie populaire pour la construction de disposition. La capacité incroyable de Flexbox à s'adapter à l'espace disponible a laissé de nombreuses personnes attendant ses possibilités avec impatience. Cependant, il ne résout pas tous les problèmes de mise en page, et il y a certains problèmes avec sa compatibilité avec les navigateurs plus âgés. Flexbox n'a actuellement pas de polyfill commun (une solution de repli pour les navigateurs plus âgés) - je ne connais qu'un polyfill pour la version 2009 de IE: Flexie. Dans de nombreux cas, j'ai constaté que l'utilisation des propriétés d'affichage CSS table souvent négligées peut trouver une solution plus simple. Ces propriétés CSS sont largement prises en charge par tous les navigateurs pertinents (notez que cela exclut IE6 et IE7) et peut résoudre gracieusement certaines difficultés de mise en page majeures et mineures.

Si vous ne connaissez pas complètement cette technique, modifier l'attribut display d'un div peut le faire se comporter comme un élément de table ou de table.

Attendez, utilisez des tables pour disposer? N'est-ce pas bon?

L'un des sujets de conception Web les plus chauds au début du 21e siècle a été le débat sur l'utilisation du code de table HTML comme outil de mise en page. C'est un hack, et c'est toujours une mauvaise pratique.

Au lieu de cela, nous utilisons HTML qui est parfaitement logique ici (c'est-à-dire div, section, en-tête, etc.), empruntant simplement des connaissances utiles de la représentation de la table à CSS. C'est exactement ce pour quoi CSS est conçu, alors ne pensez pas que c'est un piratage ou un patch. Ce n'est pas le cas.

Utilisation

display: table-cell

Dans l'exemple suivant, cliquez sur le bouton en haut et vous pouvez modifier l'attribut

des trois div colorés de display vers block: table-cell

[Codepen Exemple de lien - Remplacez par la liaison codepen réelle]

Vous pouvez voir comment les divs sont organisés horizontalement sans aucune propriété

, et vous pouvez également accéder à certaines règles de table typiques (comme float). vertical-align

Si vous avez besoin d'espacement, notez que l'attribut CSS CSS margin n'a aucun effet sur la cellule de la table: à la place, utilisez border-spacing (il doit être appliqué aux éléments de la table de conteneurs). Si vous souhaitez utiliser ces règles, vous pouvez trouver des lignes de commentaires dans Codepen.

Cette technique est très utile pour résoudre de nombreux problèmes difficiles à résoudre avec d'autres méthodes.

J'ai choisi trois cas simples, où table les attributs d'affichage sont très précieux.

Mais regardons d'abord:

Afficher l'attribut représenté comme head> TABLE, en ligne

display 属性	呈现为
table, inline-table	table
table-column	col
table-column-group	colgroup
table-row-group	tbody
table-header-group	thead
table-footer-group	tfoot
table-row	tr
table-cell	td
table-caption	caption

Table-Connem col Table-Clumn-Group Colgroup Table-Row-Group tbody Table-Header-Group thead table-footer-group tfoot Table-Row tr Table-Cell td Table-Caption TENSEM table>

Pour un guide vraiment complet des formulaires et du CSS, consultez CSS Tricks: [CSS Tricks Guide Guide Lien - Remplacez par le lien réel]

cas 1. Boîte de contour

Je pense que c'est l'un des problèmes les plus courants avec lesquels je traite: il y a des boîtes flottantes avec un contenu inconnu et vous devez les faire tous la même hauteur.

Je sais que Flexbox peut facilement résoudre ce problème, mais les règles de la table peuvent également le faire.

Appliquez simplement la propriété display: table (ou table-row) au conteneur et la propriété display: table-cell à la boîte interne. Notez que vous souhaitez supprimer tous les attributs float (sinon les attributs table-cell ne prendront pas effet).

html:

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS:

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

[Codepen Exemple de lien - Remplacez par la liaison codepen réelle]

Cas 2. Disposition simple à l'ancienne

C'est un exemple plutôt dépassé, mais je pense que vous devrez peut-être y faire face, comme je l'ai fait récemment.

Il y a quelques mois, j'ai reçu une disposition graphique qui était très similaire au schéma suivant. Il doit être compatible avec IE8, et j'ai trouvé que la meilleure façon de le faire est d'utiliser les règles de la table CSS:

[Codepen Exemple de lien - Remplacez par la liaison codepen réelle]

cas 3. Disposition adaptative avec fonction d'orchestration de contenu

L'exemple précédent nous amène à un nouveau sujet: est-il possible de créer une disposition adaptative à l'aide de règles de table CSS?

Ceci est non seulement possible, mais nous pouvons également effectuer certaines tâches d'orchestration de contenu.

Nous avons vu comment changer la propriété display de deux divs de block à table-cell pour changer leur arrangement de vertical à horizontal.

De plus, des éléments avec table-header-group attributs sont placés en haut de la disposition du tableau. Encore une fois, l'élément table-footer-group sera placé en bas, et ainsi de suite. Cela peut être utile de manière inattendue lors de la reformatation des dispositions réactives.

Dans le stylo ci-dessous, l'élément de titre échange sa position avec l'élément de navigation lorsque la fenêtre est redimensionnée, changez simplement son attribut display à table-header-group.

html:

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

CSS:

#wrapper, header {
    display: block; /* 我们实际上不需要此规则，因为它默认为此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

footer et #banner2 Les divs ont également des comportements similaires.

Il s'agit d'un plan de mise en page: la version mobile par défaut à gauche, et la version de bureau à droite:

Il s'agit d'une démonstration en cours d'exécution:

[Codepen Exemple de lien - Remplacez par la liaison codepen réelle]

Plus d'informations sur cet argument peuvent également être consultées:

• Empilement CSS en utilisant display:table
• Anti-héros de la disposition CSS - "display:table"

Conclusion

CSS table Les propriétés d'affichage sont une solution sous-estimée et précieuse aux défis de la taille et de la mise en page.

Bien que je ne puisse personnellement choisir de les utiliser pour construire des dispositions complexes, ils résolvent certainement bon nombre des défis liés à la partie de mise en page.

FAQ sur CSS table Propriétés

(Des questions fréquemment posées sur les attributs CSS table doivent être ajoutées ici. Le contenu est similaire au texte d'origine, mais le libellé doit être ajusté pour éviter la duplication.)

Veuillez noter que tous les liens de code ci-dessus doivent être remplacés par le lien codepen réel. Je ne peux pas accéder et créer directement un codepen directement.

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!