border-callapse auch für CSS-Tabellen?

[wilmaed]

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?

Danke

[Matthias Apsel]

Hallo wilmaed,

Was mache ich falsch?

Du baust Tabellen mit div-Elementen nach und nimmst ihnen damit jede Semantik.

Der Grund ist, dass die div-Elemente nur so breit werden, wie ihr Inhalt es erfordert, Abhilfe könnte ein Display: table-cell bringen.

EDIT: Ich hab grad gesehen, das hast du drin.

Aber: Verwende für tabellarische Daten eine Tabelle!

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Aber: Verwende für tabellarische Daten eine Tabelle!

Es kann auch sinnvoll sein, strukturierte Daten, die nicht mit table etc. ausgezeichnet sind, als Tabelle darzustellen. ☞ Beispiel

LLAP 🖖

[TS]

Hello,

Aber: Verwende für tabellarische Daten eine Tabelle!

Es kann auch sinnvoll sein, strukturierte Daten, die nicht mit table etc. ausgezeichnet sind, als Tabelle darzustellen. ☞ Beispiel

Es kann aber auch sinnvoll sein, die Tabelle in eine Liste umzubrechen, die Vorwärts-Rückwärts-Navigationen und Aufsetzpunkte mindestens für die Gruppenwechel vorhält.

Das hängt vom Umfang der Datensammlung ab und vom Ziel-Display!

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

Es kann aber auch sinnvoll sein, die Tabelle in eine Liste umzubrechen,

https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten

Bis demnächst
Matthias

[marctrix]

Hej Gunnar,

@@Matthias Apsel

Aber: Verwende für tabellarische Daten eine Tabelle!

Es kann auch sinnvoll sein, strukturierte Daten, die nicht mit table etc. ausgezeichnet sind, als Tabelle darzustellen. ☞ Beispiel

Und warum keine Tabelle?

Marc

[Gunnar Bittersmann]

@@marctrix

Es kann auch sinnvoll sein, strukturierte Daten, die nicht mit table etc. ausgezeichnet sind, als Tabelle darzustellen. ☞ Beispiel

Und warum keine Tabelle?

Wegen geht nicht.

li[typeof="Person"] → tr[typeof="Person"]
span[property="name"] → td[property="name"]

Soweit, so gut.

span[property="address"][typeof="PostalAddress"] → td[property="address"][typeof="PostalAddress"]

Wie bringst du span[property="streetAddress"] und span[property="addressLocality"] unter?

Oder:

span[property="streetAddress"] → td[property="streetAddress"] span[property="addressLocality"] → td[property="addressLocality"]

Wo bleibt das gruppierende span[property="address"][typeof="PostalAddress"]? Zwischen tr und td ist kein Platz.

LLAP 🖖

[Gunnar Bittersmann]

@@wilmaed

Was mache ich falsch?

• <div class="zeile"">

• Was soll ein div zwischen div.zeile und div.zelle?

• Warum hat die zeite Zeile nicht die Klasse zeile?

• Warum verwendest display: table für nicht tabellarische Daten, wenn es zum Stylen auch andere Möglichkeiten (Grid) gibt?

LLAP 🖖

[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

[wilmaed]

Deine Schachtelung ist falsch.

Mist.

Danke vielmals 😀

[Klawischnigg]

Haha…

Weit hat's die dogmatische Table-Phobie gebracht. Eine Tabelle mit Div-Suppe nachzubauen, um nur ja keine Tabelle zu verwenden. Ob das der richtige Weg ist?

Was mache ich falsch?

Du verwendest keine Tabelle…