So erstellen Sie reaktionsschnelle Tabellen mit reinem CSS mithilfe des Rasterlayoutmoduls

TL; DR

Die beliebteste Methode zum Anzeigen einer Sammlung ähnlicher Daten ist die Verwendung von Tabellen. HTML-Tabellen haben jedoch den Nachteil, dass sie nur schwer ansprechbar sind.

In diesem Artikel verwende ich das CSS-Rasterlayoutmodul und die CSS-Eigenschaften (und kein Javascript), um Tabellen zu gestalten, die Spalten abhängig von der Bildschirmbreite umschließen. Dies ändert sich weiter zu einer Karte, die auf dem Layout für kleine Bildschirme basiert.

Für Ungeduldige sehen Sie sich den folgenden Stift für eine prototypische Implementierung an.

Eine kleine Geschichte von Responsive HTML-Tabellen

Responsive Tables sind kein neues Thema, und es wurden bereits viele Lösungen vorgeschlagen. In „Responsive Table Data Roundup“, das erstmals 2012 von Chris Coyier veröffentlicht wurde, sind die Dinge sehr übersichtlich zusammengefasst (einschließlich eines Updates für 2018).

"Wirklich reaktionsschnelle Tabellen mit CSS3 Flexbox" von Vasan Subramanian zeigt eine Idee zum Umschließen von Spalten, die mit Flexbox implementiert wurden.

Obwohl viele interessante Ideen vorgeschlagen wurden, entscheiden sich Bibliotheken wie Bootstrap für horizontales Scrollen für kleine Bildschirme.

Da wir jetzt CSS Grid haben, denke ich, dass wir eine bessere Alternative zum horizontalen Scrollen haben könnten.

HTML-Tabellen

Ausgehend von den Grundlagen ist eine Tabelle in HTML ein Layoutformat zum Anzeigen von Auflistungen von Elementen über eine Matrix aus Zeilen und Spalten. Elemente werden in Zeilen mit denselben Datenattributen in denselben Spalten angeordnet, wobei die Zeilen häufig nach einem oder mehreren sortierbaren Attributen sortiert werden. Das Format bietet Ihnen eine Vogelperspektive, mit der Sie große Datenmengen schnell erfassen und untersuchen können.

Hier ist beispielsweise eine hypothetische Tabelle mit Bestelldetails, die Sie möglicherweise in einer Einkaufsanwendung sehen.

Ein Artikel ist in diesem Fall ein Bestelldetail mit Attributen wie Teilenummer, Teilebeschreibung usw.

Bei Verwendung von HTML-Tabellen wird das Layout der Daten als Zeilen und Spalten (z . B. und ) fest codiert . Dies mag für die Verwendung durch einen Bildschirm ausreichen, der über die gesamte Tabellenbreite passt. In Wirklichkeit gilt dies jedoch nicht für die Vielzahl der heute vorhandenen Geräte. In Bezug auf Hacks können Sie die Anzeigeeigenschaft von Tabellen ändern und jedes Layout verwenden, das Sie mit CSS im Allgemeinen ausführen können. Dies scheint jedoch semantisch nicht korrekt zu sein.

Tabellen neu definiert (= Sammlung von Gegenständen)

Beginnen wir damit, neu zu definieren, wie Tabellendaten in HTML ausgedrückt werden sollen.

Wie bereits erwähnt, erscheint es natürlich, geordnete Listen zu verwenden, da Tabellendaten im Wesentlichen eine geordnete Sammlung von Elementen sind. Da Tabellen häufig zur Ergänzung von Textbeschreibungen verwendet werden, erscheint es natürlich, dies in einen Abschnitt aufzunehmen. Dies hängt jedoch vom Kontext ab, in dem die Tabellendaten verwendet werden.

  1. # Part Number Part Description ...
  2. 1 100-10001 Description of part ...
  3. ...

Vanilles werden verwendet, um Elementattribute auszudrücken, da HTML5 kein geeignetes Tag dafür definiert. Der Schlüssel hier ist, semantisch ähnliche Attribute als Hierarchie von 's auszudrücken . Diese Struktur wird verwendet, um zu definieren, wie die Daten angeordnet werden sollen. Darauf werde ich im nächsten Abschnitt zum Thema Styling zurückkommen.

Bei den tatsächlichen Daten innerhalb des Elements ist das erste Element in der Liste die Kopfzeile, und der Rest der Elemente sind die tatsächlichen Daten.

Jetzt ist es an der Zeit, über das Stylen der Elemente mit CSS Grid zu sprechen.

Styling Item Sammlungen

Die Grundidee hierbei ist, alle Attribute des Elements als normale Tabelle anzuzeigen, sofern die Anzeigebreite dies zulässt. Dieses Layout hat den Luxus, so viele Elemente (Zeilen) wie möglich sehen zu können.

Wenn die Breite der Anzeige schmaler wird, werden einige Attribute vertikal gestapelt, um horizontalen Platz zu sparen. Die Auswahl der Stapelattribute sollte basieren auf:

  1. Sind die Attribute sinnvoll, wenn sie vertikal gestapelt werden? und,
  2. Spart es bei vertikalem Stapeln horizontalen Platz?

Wenn die Breite weiter auf die Größe eines Mobilgeräts verkleinert wird, wird jedes Element als Karte angezeigt. Dieses Layout ist redundant, da die Attributnamen wiederholt auf jeder Karte angezeigt werden und die geringste Übersichtlichkeit aufweisen, jedoch die Benutzerfreundlichkeit nicht beeinträchtigen (z. B. horizontales Scrollen, superkleiner Text usw.).

Lassen Sie uns nun auf die Details eingehen.

Styling Schritt 1: Vollständige Tabelle

Hier ist eine visuelle Zusammenfassung, wie die Dinge mit CSS Grid implementiert werden.

Damit Spalten umbrochen werden, werden mehrere Rastercontainer als Hierarchie definiert. Das rote Feld ist ein Rastercontainer für jede Zeile, und das blaue Feld ist ein Container für jede Spaltengruppe, die umbrochen wird.

Beginnen wir damit, die Liste als Rastercontainer festzulegen, indem wir eine aufgerufene Klasse definieren .item-containerund auf die anwenden

  • (das rote Kästchen).

    .item-container { display: grid; grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em; }

    The number of explicit columns specified with grid-template-columns is nine, which is the number of top-level 's, directly  under

  • .

    The column’s width is defined in relative length to make the columns wrap. The actual fraction has to be fine-tuned, based on the content.

    The columns that don’t wrap are defined in absolute length to maximize width usage for the wrapping columns. In the purchase order details example, the second column is a two-digit Id, so I set the width to double that size of 2 m’s.

    Next, we define another grid container called .attribute-container and apply it on all intermediate ’s under the list (the blue box).

    .attribute-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr)); }

    The minimum column width for all grid items under .attribute-container is specified with a CSS variable called --column-width-min(more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeated, available horizontal space will be split into the maximum number of columns that could take at least --column-width-min, and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fited.

    Styling Step 2: Wrapping Table

    Next, --column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container, and a different --column-width-min is specified for each class scope.

    Let’s take a look at the HTML where .part-id is applied,

     Part Number Part Description 

    and the CSS:

    .part-id { --column-width-min: 10em; }

    This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

    When we combine CSS properties like this, we need only one grid container .attribute-container, with the details changing where the class is applied.

    We can further nest .attribute-containers, to have multiple levels of wrapping with different widths, as in the following exert.

     Part Number Part Description Vendor Number Vendor Name .part-information { --column-width-min: 10em; } .part-id { --column-width-min: 10em; } .vendor-information { --column-width-min: 8em; }

    All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

    @media screen and (min-width: 737px) { ... }

    Styling Step Three: Card Layout

    The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

    To do this, a class called .attribute is defined and applied to all leaf tags under the

  • Original text


  • .

    .attribute { display: grid; grid-template-columns: minmax(9em, 30%) 1fr; }

    The attribute names are taken from a custom attribute of the leaf   called data-name, for example , and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

    .attribute::before { content: attr(data-name); }

    The first item in the list is the header and does not need to be displayed.

    /* Don't display the first item, since it is used to display the header for tabular layouts*/ .collection-container>li:first-child { display: none; }

    And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

    /* 2 Column Card Layout */ @media screen and (max-width: 736px) { .collection-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } ... } /* 1 Column Card Layout */ @media screen and (max-width:580px) { .collection-container { display: grid; grid-template-columns: 1fr; } }

    Finishing Notes

    Accessibility is an area that wasn’t considered at all and may have some space for improvement.

    If you have any ideas or second thoughts, please feel free to comment!

    And of course, thanks for reading.