wilmaed: border-callapse auch für CSS-Tabellen?

problematische Seite

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

akzeptierte Antworten

  1. problematische Seite

    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

    --
    Rosen sind rot.
    1. problematische Seite

      @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        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.

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        1. problematische Seite

          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

          --
          Rosen sind rot.
      2. problematische Seite

        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

        1. problematische Seite

          @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. problematische Seite

    @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. problematische Seite

    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

    --
    Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
    Toller Dampf voraus von Terry Pratchett
    1. problematische Seite

      Deine Schachtelung ist falsch.

      Mist.

      Danke vielmals 😀

  4. problematische Seite

    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…