responsive Tabellen per CSS

Willy-digital · 17. Februar 2020

Hallo zusammen,

seit einiger Zeit bin ich auf der Suche nach einer "guten Lösung" um Tabellen responsive zu gestalten. (Ja ich weiß, Tabellen sollten am Besten komplett vermieden werden, aber manchmal geht dies leider nicht.)

Hier gibt es die unterschiedlichsten Lösungsansätze (Spaltengrößen mit Breakpoints anpassen, mit/ohne Scrollbar, etc...), diese sind alle nicht sehr befriedigend. Ich bin jetzt auf den folgenden Ansatz (siehe CSS und HTML unten) gestoßen und finde diesen recht gut.

Wenn hier das Fenster zu klein wird, dann werden die <thead> ausgeblendet und durch ein Pseudoelement per "::before" ersetzt. Die Tabelle wird dann umstrukturiert.

Hier habe ich leider nur ein Problem, ich kann die Höhe des Pseudo-Elements "td::before" nicht automatisch an die jeweilige Feldhöhe anpassen. In diesem Beispiel wirkt sich das so aus, dass die graue Hinterlegung von "td::before" nicht bis zum unteren Ende der Spalte geht, sobald hier eine Zelle über mehrere Zeilen groß ist. (Objekt 2, Attribut 2 und Attribut 3).

Kann mir hier jemand von euch helfen, oder hat Denkanstöße/ Schlagworte zum selbst googeln für mich?

Vielen Dank schon mal im Voraus!

Willy

Code

<style>

    table {
    width:100%;
    }
    table, td, tr, th {
    border:2px solid black;
    border-collapse: collapse;
    text-align: left;
    }
    td, tr, th {
    padding:1em;
    }
    th {
    background:#eee;
    font-weight: bold;
    }
    @media screen and (max-width:700px) {
    table, tr, td {
    padding:0;
    border:1px solid black;
    }
    table {
    border:none;
    }
    thead {
    display:none;
    }
    tr {
    float: left;
    width: 100%;
    margin-bottom: 2em;
    }
    td {
    float: left;
    width: 100%;
    padding:1em;
    }
    td::before {
    content:attr(data-label);
    word-wrap: break-word;
    background: #eee;
    border-right:2px solid black;
    width: 20%;
    float:left;
    padding:1em;
    font-weight: bold;
    margin:-1em 1em -1em -1em;
    }
 .spalte{
 float: left;
 width: 60%;
 }
    }
</style>

Alles anzeigen

HTML

<table>
    <thead>
        <tr>
            <th>Attribut 1</th>
            <th>Attribut 2</th>
            <th>Attribut 3</th>
        </tr>
    </thead>
    <tbody>
  
        <tr>
    
            <td data-label="Attribut 1"><div class="spalte">Objekt 1</div></td>
            <td data-label="Attribut 2"><div class="spalte">Objekt 1</div></td>
            <td data-label="Attribut 3"><div class="spalte">Objekt 1</div></td>
        </tr>
        <tr>
            <td data-label="Attribut 1"><div class="spalte">Objekt 2</div></td>
            <td data-label="Attribut 2"><div class="spalte"><ul><li>Listeneintrag 2</li><li>Listeneintrag 2</li><li>Listeneintrag 2</li></ul></div></td>
            <td data-label="Attribut 3"><div class="spalte">Objekt 2<br> Objekt 2<br>Objekt 2</div></td>
        </tr>

    </tbody>
</table>

Alles anzeigen

basti1012 · 17. Februar 2020

Ich finde selber bauen zwar immer besser, doch bei Tabellen finde ich das hier besser.

https://datatables.net/

Falls das nix für dich ist dann sag bescheid dann helfen wir dir weiter

Willy-digital · 18. Februar 2020

Hallo basti 1012,

vielen Dank für deine Antwort, aber der Link hilft mir leider nicht weiter.

Ich habe mir dieses Art von CSS und HTML ausgesucht, weil es (ohne JS) am ehesten an meine Definition von Responsive herankommt.

Ich habe das schon selbst gebastelt, bloß mein oben beschriebenes Problem bekomme ich nicht gelöst.

Grüße

Willy-digital

Sempervivum · 18. Februar 2020

Etwas unkonventionell, das Ganze aber hat was

Zitat

Ja ich weiß, Tabellen sollten am Besten komplett vermieden werden, aber manchmal geht dies leider nicht.

Das ist ein Missverständnis, das man häufig antrifft. Es trifft zu, dass man vermeiden sollte, Tabellen für Layoutzwecke zu missbrauchen. Handelt es sich dagegen um die Darstellung von Daten, die von ihrer Struktur her tabellarisch sind, ist nichts dagegen einzuwenden.

Man sollte jedoch etwas anderes vermeiden: Float, sofern es nicht tatsächlich um das Umfließen eines Elementes geht. Dafür, die Anordnung von Elementen zu steuern, sind Flex- und Gridlayout entwickelt worden. Ich habe das CSS in deiner Mediaquery mal auf Flex umgestellt und siehe da, es wird so dargestellt, wie gewünscht.

Code

        @media screen and (max-width:700px) {

            table,
            tr,
            td {
                padding: 0;
                border: 1px solid black;
            }

            table {
                border: none;
            }

            thead {
                display: none;
            }

            tr {
                display: flex;
                flex-direction: column; /* Tabellenzellen jetzt untereinander darstellen */
                width: 100%;
                margin-bottom: 2em;
            }

            td {
                /* float: left; */
                display: flex; /* Elemente, :before und Zelleninhalt, nebeneinander darstellen */
                /* width: 100%; */ /* Die Breite wird jetzt durch das flex für tr festgelegt */
                padding: 1em;
            }

            td::before {
                content: attr(data-label);
                word-wrap: break-word;
                background: #eee;
                border-right: 2px solid black;
                width: 20%;
                /* float: left; */
                padding: 1em;
                font-weight: bold;
                margin: -1em 1em -1em -1em;
            }

            .spalte {
                /* float: left; */
                width: 60%;
            }
        }

Alles anzeigen

Willy-digital · 19. Februar 2020

Hey Sempervivum,

du bist der/die Beste!

So funktioniert es, vielen Dank!!!!

Willy-digital

responsive Tabellen per CSS

Jetzt mitmachen!

Teilen

Tags