CSS: Eine einfache Methode, Spaltenbreiten in Tabellen festzulegen

Hier ist eine ganz einfache Methode, die Spalten deiner Tabelle mit wenigen Zeilen CSS zu dimensionieren, statt jeder Zelle Inline-Werte zu geben. Mit dieser Methode lassen sich responsive Tabellen deutlich leichter erstellen.

Demo: So sieht es aus

CSS

Kopiere den folgenden Code und füge ihn in deine CSS-Datei ein.

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

Kopiere den folgenden Code und füge ihn in dein HTML-Dokument ein.

<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>

Du kannst sowohl das CSS als auch das HTML in deine Datei kopieren und nach Belieben anpassen!

Hinweis: Diese Selektoren treffen jede Tabelle auf der Seite. Um sie auf eine Tabelle zu beschränken, setze vor jeden Selektor eine Klasse, zum Beispiel .my-table td:nth-child(1). Außerdem legen Innenabstand und Inhalt eine Mindestbreite fest, sodass sehr schmale Spalten (wie die mit 5 %) breiter als angegeben dargestellt werden können.