Artikel-Hilfsmenü
Mittwoch, 28. Oktober 2020 – aktualisiert am Sonntag, 6. Dezember 2020
Webdesign · CSS · RWD · Barrierefreiheit
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
|
Raum 1 |
| 13:15 bis 13:30 Uhr | Mittagessen | Kantine |
| 13:30 bis 15:00 Uhr | Lorem ipsumdolor 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 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
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.