Feste Tabellenlayouts

Es gibt eine CSS-Eigenschaft für Tabellen, die meiner Meinung nach gut unterstützt, wenig bekannt und super nützlich ist. Sie verändert die Art und Weise, wie Tabellen gerendert werden, sodass sie ein stabileres, vorhersagbareres Layout erhalten.

Es ist dieser

table {
  table-layout: fixed;
}

Die Standardeigenschaft für table-layout ist auto, und das ist das Tabellenlayout, mit dem die meisten von uns vertraut sind. Dieser Stil fühlt sich für mich schwammig und seltsam an. Hier ist eine Untersuchung

Siehe den Stift Default Tables are Weird. von Chris Coyier (@chriscoyier) auf CodePen.

Mit table-layout: fixed;

Die Dinge werden mit dieser Eigenschaft/diesem Wert viel stabiler und vorhersagbarer.

Das Layout wird basierend auf der ersten Zeile fixiert. Setzen Sie die Breite dieser Zeile, und der Rest der Tabelle folgt.

Es ist etwas komplizierter, aber nicht viel. Hier ist eine Untersuchung

Siehe den Stift Fixed Tables Solve Some Issues von Chris Coyier (@chriscoyier) auf CodePen.

Anwendungsfall

Ich habe das untersucht, weil ich versuchte, eine einheitliche Zeilenhöhe für Pens in der Listenansicht auf CodePen beizubehalten (d. h. Pen-Titel nicht umbrechen), aber auch nicht die Breite der Tabelle aufblähen. Das hat gut funktioniert.

Ich stelle mir vor, dass die meisten von Ihnen das wissen: Tabellen sind für tabellarische Daten und E-Mails da. Nicht für Web-Layouts, wegen Gründen.

Praktisches HTML und CSS

Ich stelle mir vor, die meisten Anwendungen werden so aussehen

<table class="users">
  <thead>
    <tr>
      <th class="row-1 row-ID">ID</th>
      <th class="row-2 row-name">Name</th>
      <th class="row-3 row-job">Job</th>
      <th class="row-4 row-email">Email<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>Johnny Five</td>
      <td>Robotin'</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>0002</td>
      <td>Super Superlonglastnamesmith</td>
      <td>Doin' stuff</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

.users {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.users td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column widths are based on these cells */
.row-ID {
  width: 10%;
}
.row-name {
  width: 40%;
}
.row-job {
  width: 30%;
}
.row-email {
  width: 20%;
}

Siehe den Stift xFcrp von Chris Coyier (@chriscoyier) auf CodePen.

Zur Sicherheit sollten Sie wissen, dass Sie auch das <col>-Element verwenden können, um Spaltenbreiten festzulegen, da diese sich auf die erste Reihe von Zellen auswirken und es nur um diese erste Reihe von Zellen geht, die die Grundlage für den Rest der Tabelle bildet.

Layout-Geschwindigkeit

Ich habe gehört, dass diese Art von Tabellenlayout auch *schneller* ist, was logisch ist, da der Inhalt der gesamten Tabelle nicht analysiert werden muss, um zu wissen, wie groß die Spaltenbreiten sein werden. Daten dazu habe ich jedoch keine.

In E-Mails

Die Support-Chart von Campaign Monitor für CSS in E-Mail-Clients zeigt, dass table-layout durchgängig unterstützt wird.

Mehr Infos

• Viel mehr Informationen über <table>-Tags
• table-layout auf MDN. Beinhaltet Browserunterstützung, die im Grunde allgegenwärtig ist.

Follow-Up-Tweets

@chriscoyier das ist, was ich verwendet habe, um ungrid zu erstellen, mein responsives Grid, das nur 97 Bytes hat https://#/RgIFjpcCXu

— Chris Nager (@chrisnager) 2. Juli 2014

@chriscoyier Schau mal: https://#/lO62D4lECK

— Harry Roberts (@csswizardry) 2. Juli 2014

@chriscoyier @twbootstrap verwendet dies zur Handhabung von horizontalen Button-Gruppen: https://#/dhLRuN0Jof

— Lucas Constantino (@luconsilva) 2. Juli 2014

@chriscoyier Chris, gibt es einen Grund, warum man nicht einfach immer table-layout: fixed verwenden sollte?

— Mike Aparicio (@peruvianidol) 2. Juli 2014