Tabellen sind ein praktisches Werkzeug auf Websites, aber die mobile Ansicht bringt Probleme. Deswegen habe ich ein CSS Workaround für Tabellen gebaut, mit der die Tabellen horizontal Scrollbar werden.
Demo
| Jahr | Schule | Abschluss |
|---|---|---|
| 2020 – 2022 | Medien Colleg Rostock | Mediengestalter Digtal / Print (Umschulung) |
| 2013 – 2015 | HTW Berlin | Angewandte Informatik Bachelor (abgebrochen) |
| 2010 – 2013 | OSZ Hein Möller | Staatlich geprüfter Technischer Assistent für Elektronik und Datentechnik
Fachhochschulreife |
| 2009 – 2010 | VHS – Abendschule | Mittlerer Schulabschluss |
| 2007 – 2009 | VHS – Abendschule | Hauptschulabschluss |
Tabelle erstellen
Zu erst schreibst du eine normale HTML Tabelle. Darum kommt noch ein DIV als Wrapper.
<div class="tableWrapper">
<table>
<tbody>
<tr>
<th>Jahr</th>
<th>Schule</th>
</tr>
<tr>
<td>2020 – 2022</td>
<td>Medien Colleg Rostock</td>
</tr>
<tr>
<td>2013 – 2015</td>
<td>HTW Berlin</td>
</tr>
</tbody>
</table>
</div>CSS
Dem DIV Wrapper sagen wir, dass auf der X Achse gescrollt werden soll. Der Tabelle geben wir das Attribut border-collapse: collapse.
.tableWrapper {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}Fazit
Jetzt kann man auf mobilen Geräten die Tabelle horizontal scrollen, da auf fast allen mobilen Geräten keine Scrollbar bzw. nur eine dezente vorhanden ist, sieht es auch ganz gut aus.
