Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Eine responsive Tabelle - nur mit CSS

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Mit ein wenig CSS eine Tabelle responsiv machen. Im folgenden Beispiel wird eine dreispaltige Tabelle bei Bedarf*) linearisiert, d.h. jede Zelle wird in einer eigenen Zeile mit vorangestelltem Spaltentitel angezeigt. Die Lösung ist barrierefrei.

*) "bei Bedarf" heißt in dieser Demo:
Smartphones im Portrait-Modus (hochkant), und auf Desktop-Monitoren, wenn das Browserfenster schmäler als 850px gezogen wird.

Wann? Was? Wo?
12:30 bis 13:00 Uhr Eintreffen der Teilnehmer Foyer
13:00 bis 13:15 Uhr Vorstellung der Themen
  • Thema 1
  • Thema 2
  • Thema 3
Raum 1
13:15 bis 13:30 Uhr Mittagessen Kantine
13:30 bis 15:00 Uhr

Lorem ipsum

dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Raum 2
ab 15:00 Uhr (open end) Gemütliches Zusammensein Keller

Das HTML

Für das HTML-Markup der Tabelle genügt die Minimalform, ohne jede Erweiterung.

<table> <thead> <tr> <th>Wann?</th> <th>Was?</th> <th>Wo?</th> </tr> </thead> <tbody> <tr> <td>12:30 bis 13:00 Uhr</td> <td>Eintreffen der Teilnehmer</td> <td>Foyer</td> </tr> <tr> <td>13:00 bis 13:15 Uhr</td> <td>Vorstellung der Themen <ul> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li> </ul> </td> <td>Raum&nbsp;1</td> </tr> … </tbody> </table>


Das CSS

<style> /*Variablen deklarieren*/ * { --main-color:#fff; --th-bg-color: #737373; --alt-bg-color:#f2f2f2; --border:1px solid #bbb; } table { border:var(--border); border-collapse: collapse; font-size:1rem; background: var(--main-color); width:100%; } tr {border-bottom:var(--border);} th { background-color: var(--th-bg-color); color:var(--main-color); text-align:center; } td { padding: .5em; vertical-align:top; } @media (min-width:601px) { tr:nth-child(even) {background:var(--alt-bg-color);} td:first-child {min-width:9em;;border-right:var(--border);} td:nth-child(3) {text-align:center;border-left:var(--border);} } @media (max-width:600px) { table { background:none; border:none; border-collapse:separate; border-spacing: 0 1em; padding:0; } thead {display:none;} tr { background: var(--main-color); } td { display:flex; border-top:var(--border); border-left:var(--border); border-right:var(--border); } td:last-child {border-bottom:var(--border);} td:nth-of-type(1):before { content: "Wann?"; display:table-cell; } td:nth-of-type(2):before { content: "Was?"; display:table-cell; } td:nth-of-type(3):before { content: "Wo?"; display:table-cell; } td::before { background-color: var(--alt-bg-color); border-right: var(--border); min-width: 4em; padding:.5em; font-weight: bold; margin:-.5em .5em -.5em -.5em; } } </style>

Die vorgestelle Lösung eignet sich für einfache, zweidimensionale Tabellen. Eine gute Quelle, auch für komplexere Tabellen, gibt es bei css-tricks.com

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat