À l'aide de display:table-cell sans table-row
j'ai récemment remarqué qu'il est possible d'utiliser display: table-cell; sur un élément sans l'entourer d'un élément en utilisant display: table-row;
exemple (travaillant en IE, Chrome, FF, Safari, Opera):
<div style="display: table;">
<div style="display: table-cell;">
Text
</div>
</div>
est-ce que c'est considéré comme un mauvais style? La table-cellule doit-elle être entourée d'une rangée de tables ou n'est-elle pas nécessaire?
2 réponses
Pas de. Il ne doit pas être utilisé avec display: table-row . Lire ici .
table-cell représente simplement un <td> ou <th> :
Spécifie qu'un élément représente une cellule de tableau.
et en particulier en ce qui concerne table-cell :
par exemple, une image définie à 'display: table-cell' remplira le l'espace disponible et ses dimensions pourraient contribuer à les algorithmes de dimensionnement de table, comme avec une cellule ordinaire.
à Partir de Tout ce que Vous Savez à Propos de CSS, c'Est Mal :
Anonyme Éléments De La Table
les tables CSS respectent volontiers les règles normales de disposition des tables, qui active une fonction extrêmement puissante de la disposition des tables CSS: manquant les éléments de table sont créés anonymement par le navigateur. Le CSS2.1 spécification:
Les langues de Document autres que HTML ne peuvent pas contenir tous les éléments dans le modèle de tableau CSS 2.1. Dans ces cas, les éléments "manquants" doit être supposé pour que le modèle de table fonctionne. Une table l'élément générera automatiquement les objets table anonymes nécessaires autour de lui-même, composé d'au moins trois objets imbriqués correspondant à un élément"table"/" inline-table", a " table-row" élément, et une "table-cell" de l'élément.
cela signifie que si nous utilisons
display: table-cell;sans contenant la cellule dans un bloc défini surdisplay: table-row;, la ligne sera implicite-le navigateur agira comme si la ligne déclarée est en fait là-bas.
donc non, il n'y a rien de mal à utiliser display:table-cell sans contenir display:table-row . Le CSS qu'il produit est parfaitement valide et a quelques cas d'utilisation très intéressants. Pour plus d'informations sur l'utilisation anonyme des Éléments du tableau, voir le l'article que je suis en citant.
Note:
le fait qu'il produit des CSS valides ne signifie pas que le comportement de display:table-cell sans display:table-row ou display:table-row est stable. Même aujourd'hui (février 2016), le comportement des éléments de table anoymous reste incohérent à travers les navigateurs. Voir comportement incohérent de l'affichage: table et affichage: table-cell pour plus de détails.