Responsieve tabellen kunnen een uitdaging zijn vanwege hun complexiteit, specifiek als het gaat om het weergeven van hun inhoud op kleinere apparaten zoals tablets en mobiele telefoons. Hier is een basisvoorbeeld over hoe je een tabel responsief kunt maken met CSS:
HTML:
```
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
CSS:
```
.table-responsive {
width: 100%;
overflow-x: auto;
-ms-overflow-style: scrollbar;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
}
@media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; }
thead tr { position: absolute; top: -9999px; left: -9999px; } tr {margin: 0 0 1rem 0;} td { border: none; border-bottom: 1px solid #ddd; position: relative; padding-left: 50%; } td:before { position: absolute; top: 0; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-column); } } ```Hierdoor wordt de tabel in blokken verdeeld wanneer het scherm verschuift naar een kleiner formaat. Het rij-etiket van elke cel wordt weergegeven links van de celgegevens.
Merk op dat in het CSS-gedeelte van het responsieve ontwerp de CSS pseudoklasse “::before” wordt gebruikt, die nog een extra “data-” attribuut in HTML vereist zoals `
Dit is een eenvoudige en effectieve manier om een responsieve tafel weer te geven, maar misschien wil je andere methoden onderzoeken of je moet iets op maat maken om aan je specifieke behoeften te voldoen.
