CSS: een eenvoudige manier om kolombreedtes in een tabel in te stellen

Hier is een heel eenvoudige manier om de kolommen van je tabel te dimensioneren met een paar regels CSS, in plaats van elke cel inline waarden te geven. Met deze methode maak je responsieve tabellen veel makkelijker.

Demo: zo ziet het eruit

CSS

Kopieer de onderstaande code en plak deze in je CSS-bestand.

table tr td { padding: 20px; }
table td:nth-child(1) { width: 35%; }
table td:nth-child(2) { width: 15%; }
table td:nth-child(3) { width: 5%; }
table td:nth-child(4) { width: 35%; }
table td:nth-child(5) { width: 10%; }

HTML

Kopieer de onderstaande code en plak deze in je HTML-document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

Je kunt zowel de CSS als de HTML naar je bestand kopiëren en naar wens aanpassen!

Let op: deze selectors gelden voor elke tabel op de pagina. Om ze tot één tabel te beperken, zet je een klasse voor elke selector, bijvoorbeeld .my-table td:nth-child(1). Ook stellen padding en inhoud een minimumbreedte in, waardoor zeer smalle kolommen (zoals die van 5%) breder kunnen worden weergegeven dan opgegeven.