BLOCK Element in einer Tabelle

Question

Warum wird <header>HEADER</header> mit dieser Kombination aus CSS und HTML über <nav>NAVIGATION</nav> gerendert?

#wrapper { display: table; } 
 
header { display: table-header-group; }

<div id="wrapper"> 
 
    <nav>NAVIGATION</nav> 
 
    <header>HEADER</header> 
 
</div>

Answer 1

Das <nav> Element hat display:block und es ist die unmittelbare Kind eines Elements mit display:table, so dass die Layout-Engine erzeugt „anonymous Wrapper-Boxen“ um es zu zwingen, auf den Tisch Formatierungsmodell anzupassen. In ähnlicher Weise ist der nackte Textknoten innerhalb des Elements <header>, das display:table-header-group hat, eingepackt. Die „Buchsbaum“, der sich ergibt ist das gleiche wie wenn Sie diesen HTML ohne CSS geschrieben hatte:

<table> 
 
<tbody><tr><td><div>NAVIGATION</div></td></tr></tbody> 
 
<thead><tr><td><div>HEADER</div></td></tr></thead> 
 
</table>

Und ein <table> angegeben ist, den Inhalt seiner <thead> zuerst zeigen, dann seine <tbody>, so erhalten Sie HEADER und dann NAVIGATION.

Siehe die Diskussion von "layout-internal display types" in der CSS3 Display Spezifikation. Insbesondere beschreibt das Beispiel 1 etwas sehr ähnliches.

Answer 2

Wenn von „Malformatted“ Sie meinen, nicht richtig, nicht ausgerichtet sind - weil Sie die Anzeige der Wrapper Tisch setzen. Dies ist kein tatsächliches Tabellen-HTML-Element.