web-dev-qa-db-fra.com

Comment (et pourquoi) utiliser display: table-cell (CSS)

J'ai un site avec un arrière-plan très actif (je parle ici de 6 index z différents ou deux avec des animations). Je voulais un au premier plan qui avait du contenu, mais je voulais une "fenêtre" à travers le fond. Quelques problèmes que j'ai eu:

  1. vous ne pouvez pas "percer un trou" dans un fond, alors ...

    • J'ai construit un div contenant, appelons-le "srminfo"
    • À l'intérieur de cela j'avais un "haut", "gauche", "fenêtre", "droite" et "bas"
    • en haut, à gauche, à droite et en bas, tous avaient un fond blanc opaque
    • tandis que les divs srminfo et window avaient un background: none;

  2. Peu importe les efforts que j'ai faits, le div "droit" ne comblerait pas l'espace entre les div "haut" et "bas", j'ai essayé beaucoup de choses différentes. La raison pour laquelle il devait être dynamique est que le texte de la division "gauche" était dynamique en fonction de la couleur de fond, elle-même générée aléatoirement avec JavaScript.

Comment est display: table; et tous les autres codes CSS liés comme des tables? Et comment peut-il être utilisé?

htmlcsscss-tables
6
Jim

Après des jours à essayer de trouver la réponse, j'ai finalement trouvé

affichage: table;

Il y avait étonnamment très peu d'informations disponibles en ligne sur la manière de le faire fonctionner, même ici, donc passons au "Comment":

Pour utiliser ce morceau de code fantastique, vous devez vous rappeler que les tables étaient le seul moyen de structurer le code HTML, à savoir la syntaxe. Pour obtenir un tableau avec 2 lignes et 3 colonnes, vous devez procéder comme suit:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

De même, pour que CSS le fasse, utilisez les éléments suivants:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

Comme vous pouvez le voir dans l'exemple JSFiddle ci-dessous, les div de la 3ème colonne n'ont pas de contenu, tout en respectant la hauteur automatique définie par le texte dans les 2 premières colonnes. GAGNER!

http://jsfiddle.net/blyzz/1djs97yv/1/

Il convient de noter que display: table; ne fonctionne pas dans IE6 ou 7 (merci, FelipeAls), donc, selon vos besoins en matière de compatibilité de navigateur, il se peut que ce ne soit pas la réponse que vous recherchez.

20
Jim

La famille display:table de propriétés CSS est généralement présente afin que les tables HTML puissent être définies en fonction de celles-ci. Parce qu'ils sont si intimement liés à une structure de balise spécifique, ils ne voient pas d'autre utilité.

Si vous deviez utiliser ces propriétés dans votre page, vous auriez besoin d'une structure de balises ressemblant beaucoup à celle des tables, même si vous n'utilisiez pas réellement la famille de balises <table>. Une version minimale serait un élément conteneur unique (display:table), avec des enfants directs pouvant tous être représentés sous forme de lignes (display:table-row), qui ont eux-mêmes des enfants directs pouvant être représentés sous forme de cellules (display:table-cell). Il existe d'autres propriétés qui vous permettent d'imiter d'autres balises de la famille table, mais elles nécessitent des structures analogues dans le code HTML. Sans cela, il sera très difficile (voire impossible) de tirer le meilleur parti de ces propriétés.

3
The Spooniest

Il est encore plus facile d'utiliser la relation parent> enfant afin que la div interne n'ait pas besoin de définir explicitement ses classes CSS:

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}
<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>
3
Dmitriy Sintsov

Comment (et pourquoi) utiliser display: table-cell (CSS)

Je voulais juste mentionner, puisque je ne pense pas qu'aucune des autres réponses ne le fasse directement, que la réponse à "pourquoi" est la suivante: il n'y a pas de bonne raison et vous ne devriez probablement jamais faire cela.

Au cours de mes plus de dix années d’expérience dans le développement Web, je ne peux penser à une seule fois où j’aurais mieux fait d’avoir un groupe de <div>s avec des styles display que d’avoir uniquement des éléments de tableau.

La seule hypothèse que je pourrais imaginer est si vous avez des données tabulaires stockées dans une sorte de format de tableau non HTML (par exemple, un fichier CSV). Dans une version très spécifique de ce cas, il est peut-être plus facile d'ajouter simplement des balises <div> autour de tout, puis d'ajouter des styles basés sur des descendants, plutôt que d'ajouter des balises de table réelles.

Mais c'est un exemple extrêmement artificiel, et dans tous les cas réels que je connaisse, le fait d'utiliser simplement des balises de table serait préférable.

2
machineghost