Spaltenbreiten in HTML-Tabellen festlegen

Für eine kleine, einmalige Tabelle genügt eine Inline-Angabe wie <th style="width: 15%">ID</th>. In einer wiederverwendbaren Komponente bevorzugen Sie ein Stylesheet oder ein <colgroup>, damit die Regel für die gesamte Spalte einschließlich ihrer Datenzellen gilt:

<style>
.people {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.people th,
.people td {
  border: 1px solid black;
  overflow-wrap: anywhere;
}

.people .id-column { width: 15%; }
.people .name-column { width: 70%; }
.people .age-column { width: 15%; }
</style>
<table class="people">
  <colgroup>
    <col class="id-column">
    <col class="name-column">
    <col class="age-column">
  </colgroup>
  <thead>
    <tr><th scope="col">ID</th><th scope="col">Name</th><th scope="col">Age</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>25</td></tr>
    <tr><td>2</td><td>Jackson</td><td>40</td></tr>
  </tbody>
</table>

Die drei Prozentangaben ergeben 100 %, daher hat die Tabelle eine klare anfängliche Aufteilung: Name ist breiter als ID und Age. table-layout: fixed macht die Größe hauptsächlich von Tabellenbreite, expliziten Spaltenbreiten und der ersten Zeile abhängig, nicht von der längsten Zelle jeder Zeile. overflow-wrap: anywhere lässt ungewöhnlich lange Werte umbrechen, statt die Tabelle zu verbreitern.

Der <colgroup> muss vor den Zeilengruppen der Tabelle stehen. Ein <col> stellt eine Spalte dar, keine sichtbare Zelle, und hat keinen eigenen Inhalt. Verwenden Sie span bei einem <col>, wenn aufeinanderfolgende Spalten dieselbe Regel teilen. Dieser Ansatz hält das HTML semantisch: Verwenden Sie <th> für Überschriften und scope="col", damit Hilfstechnologien Überschriften ihren Zellen zuordnen können.

Klassen und :nth-child() vergleichen

Sie können Breiten in der ersten Zeile mit Selektoren wie .people th:nth-child(1) { width: 15%; }, .people th:nth-child(2) { width: 70%; } und .people th:nth-child(3) { width: 15%; } festlegen. So bleiben die klassenbasierten und :nth-child()-Techniken erhalten, ohne jede Überschrift mit einer Klasse zu versehen. Klassen sind verständlicher, wenn die Spaltenbedeutung wichtig ist; :nth-child() ist praktisch bei einer stabilen, einfachen Spaltenreihenfolge.

Verlassen Sie sich nicht auf :nth-child(), wenn Zeilen colspan enthalten, Überschriftenzeilen eine andere Struktur haben oder Spalten umgeordnet werden können. In diesen Fällen machen <colgroup> oder benannte Klassen die beabsichtigte Spaltenzuordnung eindeutig. Wenn nur einige Breiten angegeben sind, verteilt der Browser den verbleibenden Platz; nehmen Sie bei automatischem Layout nicht an, dass eine nicht angegebene Spalte immer einen exakten Prozentsatz erhält.

Inhalte behandeln, die nicht passen

Ein festes Layout macht eine schmale Spalte nicht groß genug für jeden möglichen Wert. Eine lange, nicht unterbrochene URL oder Kennung kann überlaufen, wenn sie nicht umbrechen darf. Der folgende Grenzfall behält die Breitenregel bei und lässt die Zelle horizontal scrollen, statt das Seitenlayout zu verändern:

<style>
  .compact {
    table-layout: fixed;
    width: 320px;
  }
  .compact th,
  .compact td {
    max-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .compact td.code {
    overflow-x: auto;
    white-space: nowrap;
  }
</style>
<table class="compact">
  <colgroup><col style="width: 25%"><col style="width: 75%"></colgroup>
  <tr><th scope="col">Type</th><th scope="col">Value</th></tr>
  <tr><td>URL</td><td class="code">https://example.com/a-very-long-value-without-spaces</td></tr>
</table>

Bei normalem Fließtext ist Umbruch meist besser als horizontales Scrollen. Testen Sie die Tabelle mit realistischen Inhalten und bei schmalen Ansichtsfenstern. Breiten sind Hinweise, die vom Tabellenlayout-Algorithmus interpretiert werden, keine Garantie dafür, dass jede Zelle exakt ihre Pixelgröße behält.