Um eine Tabelle in CSS responsiv zu machen, können Sie eine Kombination aus bestimmten CSS-Techniken verwenden. Daher ist der Ansatz nicht so geradlinig wie bei anderen HTML-Elementen. Hier ist ein einfacher Ansatz, den Sie verwenden können:
1. Legen Sie zunächst eine Mindestbreite für die Tabelle fest:
```css .responsive-table { min-width: 300px; } ```2. Verwenden Sie dann die CSS-Eigenschaft `overflow-x` und setzen Sie sie auf `auto` ein, um sicherzustellen, dass der Benutzer die Tabelle horizontal scrollen kann, wenn sie zu breit für den Bildschirm wird.
```css .responsive-table { min-width: 300px; overflow-x: auto; } ```3. Bei kleineren Geräten könnten Sie CSS Media Queries verwenden, um die Tabelle in Blöcke statt in Zeilen anzuzeigen.
```css @media screen and (max-width: 600px) { .responsive-table thead { display: none; } .responsive-table tr { margin-bottom: 1em; display: block; } .responsive-table td { display: block; text-align: right; position: relative; padding-left: 50%; } .responsive-table td::before { content: attr(data-label); position: absolute; left: 0; width: 45%; padding-left: 15px; font-weight: bold; text-align: left; } } ```In der letzten Regel verwenden wir die Pseudoelement CSS-Eigenschaft `::before` und die Funktion `attr()`, um den Inhalt des `data-label` Attributs als Textinhalt dieses Pseudoelements festzulegen. Sie müssten jedes `td` Element in Ihrer Tabelle mit einem `data-label` Attribut versehen, das den passenden Kopf der Tabelle enthält. Dies sorgt dafür, dass bei kleineren Bildschirmen der Tabellenkopf (der durch `display: none;` ausgeblendet wurde) durch das `data-label` Attribut ersetzt und neben dem entsprechenden Zellinhalt angezeigt wird.
Diese Lösung erfordert einiges an manueller Arbeit, insbesondere wenn Sie eine große Tabelle haben, aber es hält Ihre HTML-Struktur sauber und gewährleistet, dass Ihre Tabelle auf allen Bildschirmgrößen gut aussieht. Andere Lösungen könnten die Verwendung einer Javascript-Bibliothek sein, die automatisch Tabellen responsiv macht.
