Ein Vorschlag für eine einfache responsive Tabelle

Wie erstellt man eine tabellenähnliche Benutzeroberfläche, die ohne JavaScript responsive ist? Das ist die Frage, die ich mir die ganze Woche gestellt habe, während ich an einem neuen Projekt gearbeitet und versucht habe, die einfachste mögliche Tabelle zu erstellen. Ich wollte kein Framework verwenden und stattdessen mit einigen neuen Eigenschaften experimentieren, um nur mit einem leichten Touch von CSS auszukommen.

Spoiler! Das ist es, was ich bisher zustande gebracht habe (und bitte beachten Sie, dass diese Demo derzeit in der neuesten Version von Chrome funktioniert). Versuchen Sie, ein wenig herumzuscrollen

Siehe den Pen Eine einfache responsive Tabelle – Final von Robin Rendle (@robinrendle) auf CodePen.

Bemerken Sie, wie die erste Spalte links klebt und die Kopfzeile am oberen Rand der Tabelle haftet? Das ermöglicht es uns, viele Daten zu überfliegen, ohne ständig scrollen zu müssen, um herauszufinden, in welcher Spalte oder Zeile wir uns befinden – in vielen Benutzeroberflächen dieser Art kann man sich leicht verirren.

Wie bin ich also vorgegangen, um dieses Ding zu machen? Tauchen wir ein!

Hinzufügen des Markup

Zuerst müssen wir unser Markup für die Tabelle hinzufügen, und um sicherzustellen, dass dieses Beispiel so realistisch wie möglich ist, werden wir hier viele Zeilen und Spalten hinzufügen

Siehe den Pen Eine einfache responsive Tabelle – 1. von Robin Rendle (@robinrendle) auf CodePen.

Es passiert nichts wirklich Kompliziertes. Wir haben nur eine ganz normale Tabelle mit einem <thead> und einem <tbody>, aber wir verpacken die gesamte Tabelle in die table-wrapper Div, was ich gleich erklären werde.

Als Nächstes fügen wir dem Wrapper-Element grundlegende Stile hinzu, um es in die Mitte der Seite zu bewegen und ihm eine maximale Breite zu geben. Wir müssen auch sicherstellen, dass die .table-wrapper eine Überlauf-Einstellung von scroll hat, obwohl wir das bei größeren Bildschirmgrößen noch nicht brauchen werden

body {
  display: flex;
  font-family: -apple-system;
  font-size: 90%;
  color: #333;
  justify-content: center;
}

.table-wrapper {
  max-width: 700px;
  overflow: scroll;
}

Siehe den Pen Eine einfache responsive Tabelle – 2. von Robin Rendle (@robinrendle) auf CodePen.

Klasse! Jetzt können wir Stile für die erste Spalte unserer Tabelle und das thead-Element hinzufügen, sowie grundlegende Stile für jede der Tabellenzellen

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td, th {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 20px;
}

Siehe den Pen Eine einfache responsive Tabelle – 3 von Robin Rendle (@robinrendle) auf CodePen.

Das Problem hier ist, dass wir nun eine ziemlich unzugängliche Tabelle erstellt haben; obwohl wir in der Tabelle scrollen können, können wir nicht ablesen, welche Spalte oder Zeile mit welchem Datenpunkt verbunden ist. Dies kann zu einer Tabelle führen, die fast vollständig unleserlich ist, und wenn wir sie mit echten Daten füllen würden, wäre es noch schlimmer.

position: sticky zur Rettung!

position: sticky ist ein wunderbar praktischer CSS-Trick, mit dem ich in letzter Zeit viel experimentiere. Er ermöglicht es Ihnen, Kindelemente an ihren übergeordneten Containern zu fixieren, sodass das Kindelement beim Scrollen immer sichtbar ist. Und genau das brauchen wir hier für die erste Spalte und die Kopfzeile unseres Tabellenelements.

Wir können diese relativ neue Funktion mit CSS wie folgt verwenden

// The heading of our table
th {
  background-color: #eee;
  position: sticky;
  top: -1px;
  z-index: 2;
  
  // The first cell that lives in the top left of our spreadsheet
  &:first-of-type {
    left: 0;
    z-index: 3;
  }
}

// The first column that we want to stick to the left
tbody tr td:first-of-type {
  background-color: #eee;
  position: sticky;
  left: -1px;
  z-index: 1;
}

Die z-index-Werte sind hier wichtig, da wir möchten, dass die Kopfzeile die erste linke Spalte überlagert, die ebenfalls sticky sein wird. Aber! Wir möchten auch, dass die leere Zelle oben links sowohl unsere Kopfzeile als auch unsere linke Spalte überlagert, wie hier

Siehe den Pen Eine einfache responsive Tabelle – Final von Robin Rendle (@robinrendle) auf CodePen.

Aber da haben wir es! Eine einfache responsive Tabelle, in der Sie sowohl die Kopfzeile als auch die erste Spalte sehen können, egal wo Sie sich in der Tabelle befinden. Es ist jedoch erwähnenswert, dass Ihre Erfahrungen variieren können. position: sticky hat derzeit eine eher lückenhafte Unterstützung, daher lohnt es sich, sie gründlich zu testen, bevor Sie sie verwenden. Oder Sie könnten etwas wie Stickybits verwenden, das als leichtgewichtiger Polyfill fungiert.

Wenn Sie sich außerdem tiefer mit Tabellen befassen müssen, haben wir einen sehr nützlichen vollständigen Leitfaden zum Table-Element erstellt.