border-callapse auch für CSS-Tabellen?

[Auge]

Hallo

Siehe codepen.io:

Die erste (blaue) Tabelle ist eine display:table. Mitborder-collapse: collapsemöchte ich erreichen, dass alle Rahmen zusammenfallen (und nicht nur die 2 inneren vertikalen). Also so wie die schwarze html-Tabelle.

Was mache ich falsch?

Deine Schachtelung ist falsch.

<div class="tabelle">
	<div class="zeile"">
    <div>
			<div class="zelle" style="vertical-align:bottom">A1</div>
			<div class="zelle" style="vertical-align:middle">A2</div>
			<div class="zelle" style="vertical-align:top">A3</div>
		</div>
	  <div>
			<div class="zelle" style="vertical-align:bottom">B1</div>
			<div class="zelle" style="vertical-align:middle">B2</div>
			<div class="zelle" style="vertical-align:top">B3</div>
		</div>
  </div>
</div>

Zwischen deiner „Tabelle“, dem div für die Zeile und denen für die Zellen ist noch eine Ebene div eingezogen. Zudem lauert in <div class="zeile""> ein übrflüssiges ".

Entferne ich die laut der zum Vergleich bereitgestellten „echten“ Tabelle, fallen die border der Zellen mit dem der unechten Tabelle im Firefox zusammen, wie in meinem Fork zu sehen ist.

Hier schon mal das korrigierte HTML.

<div class="tabelle">
	  <div class="zeile">
			<div class="zelle" style="vertical-align:bottom">A1</div>
			<div class="zelle" style="vertical-align:middle">A2</div>
			<div class="zelle" style="vertical-align:top">A3</div>
		</div>
	  <div class="zeile">
			<div class="zelle" style="vertical-align:bottom">B1</div>
			<div class="zelle" style="vertical-align:middle">B2</div>
			<div class="zelle" style="vertical-align:top">B3</div>
		</div>
</div>

Tschö, Auge