CSS: display: block; vs display: table;
Existe-t-il une différence entre display:block; et display:table;? Il me semble que le type d'affichage du nœud dom contenant les nœuds table-row et table-cell n'a pas d'importance. MDN dit que display:table; le fait se comporter comme une table , mais ne précise pas en quoi consiste ce comportement. Quel est ce comportement?
De même, existe-t-il une différence entre display:inline-block; et display:inline-table;?
En comparant les deux (bloc et table), je ne connais aucune différence fondamentale (il peut y avoir des différences mineures) que vous verriez dans le vide. Je crois que les principales différences concernent spécifiquement les enfants. Les tables et leurs enfants ont des attributs/relations très différents de ceux d'une div et de ses enfants.
En ce qui concerne inline-block et inline-table, voir: Quelle est la différence entre inline-block et inline-table?
Cet article ( http://css-tricks.com/almanac/properties/d/display/ ) contient des informations intéressantes, en particulier sur les différentes propriétés d'affichage associées à une table.
Les deux seront au niveau du bloc, en ce sens qu'ils ne s'afficheront à côté de rien d'autre, par défaut.
Il y a une différence significative dans l'affichage réel de l'élément. display: block; s'étendra à 100% de l'espace disponible, alors que display: table; sera aussi large que son contenu.
De plus, comme d’autres l’ont déjà mentionné, display: table; est nécessaire pour que display: table-cell; ou tout autre élément table- fonctionne dans les descendants.
Je le sais seulement parce que je viens de rencontrer le problème d’essayer d’obtenir le display: table; pour remplir la largeur du conteneur. Je n'ai pas été en mesure de voir s'il y avait une différence dans l'affichage de display: inline; et display: inline-table;.
Je faisais des recherches à ce sujet aujourd'hui et j'ai trouvé cette section de la spécification CSS utile: http://www.w3.org/TR/CSS21/tables.html#model
Notamment
la table génère une zone de bloc principale appelée zone d'encapsulation de table qui contient la zone de table elle-même et toutes les zones de légende (dans l'ordre du document ). La zone de table est une zone de niveau bloc contenant les zones de table internes De la table.
Si je comprends bien, cela signifie essentiellement que le navigateur génère un bloc conteneur invisible pour tout ce qui contient display: table!
L'un des principaux avantages de l'utilisation de display: table au lieu de display: block sur un élément parent est que vous pouvez utiliser display: inline-block en toute sécurité sur les éléments enfants, sans avoir à vous soucier de l'espace entre les enfants.
Sinon, vous devrez vous débarrasser de cet espace blanc supplémentaire en utilisant des commentaires HTML entre les balises de fermeture/ouverture (par exemple, avec plusieurs éléments <li> pour la navigation horizontale typique), ou en mettant tout ce qui est en ligne dans votre code sans retour de transporteur. (qui est un cauchemar de montage).
Récemment, j'ai trouvé un autre exemple de différence entre display: block et display: table
Je prends le modèle d'email de tournesol:
<table class="row footer">
<tbody>
<tr>
<td class="wrapper">
<table class="six columns">
<tbody><tr>
<td class="left-text-pad">
<h5>Connect With Us:</h5>
<table class="tiny-button facebook">
<tbody><tr>
<td>
<a href="#">Facebook</a>
</td>
</tr>
</tbody></table>
<br>
<table class="tiny-button Twitter">
<tbody><tr>
<td>
<a href="#">Twitter</a>
</td>
</tr>
</tbody></table>
<br>
<table class="tiny-button google-plus">
<tbody><tr>
<td>
<a href="#">Google +</a>
</td>
</tr>
</tbody></table>
</td>
<td class="expander"></td>
</tr>
</tbody></table>
</td>
<td class="wrapper last">
<table class="six columns">
<tbody><tr>
<td class="last right-text-pad">
<h5>Contact Info:</h5>
<p>Phone: 408.341.0600</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</td>
<td class="expander"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
avec display: block !important; sur la table de bas de page, cela donne:
avec display: table !important; sur la table de bas de page, cela donne:
L'instantané est pris avec l'application de messagerie sur iOS 10.0.1.
Une différence qui semble exister est que display:table efface la ligne (comme le ferait un display:block) mais ne s'agrandira pas pour remplir la ligne (un bloc d'affichage prendrait la quantité maximale de largeur, un inline ne le ferait pas)
Ainsi, vous pouvez obtenir une boîte qui redimensionne avec votre contenu, mais reste seule dans sa "ligne"
De plus: sur un thème wordpress avec une CSS complexe dans laquelle il y avait des effets contradictoires sur une zone de classe spéciale, je ne pouvais tout simplement pas centrer cette zone à cause des conflits CSS. Finalement, la seule façon de centrer cette pièce était de la passer de display: inline-block à display: table, puis enfin d'accepter les règles de centrage, qu'elles soient text-align ou margin: 0 auto.
Je ne prétends pas que mon cas est statistiquement significatif, je ne fais que fournir un retour d'expérience personnel, au cas où d'autres personnes en détresse similaire tomberaient sur cette page après des recherches sur le Web :)
Fondamentalement, display: inline-block permet aux éléments de s'empiler les uns sur les autres sans aucune requête de support. Si vous définissez les éléments à afficher: table-cellule, vous ne pouvez pas modifier leur présentation sans utiliser une requête multimédia.