webentwicklung-frage-antwort-db.com.de

Erstellen Sie eine Tabelle mit CSS-Raster

Ich versuche, eine Tabelle mit einem CSS-Raster zu erstellen, wobei gleiche Spalten auf dem Inhalt basieren. Ich möchte <table> vermeiden. Dies ist eine Fortsetzung dieser Frage: Automatische Anpassung von Spalten mit CSS-Raster

Was ich versuche zu erreichen:

 enter image description here

Diese Tabelle funktioniert: https://codepen.io/anon/pen/baExYw

Aber ich möchte die einzelnen Zeilen in eine div umschließen, was den Tisch überraschend bricht.

Diese Tabelle ist defekt: https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

app.css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: #fff;
  color: #444;
  max-width:  800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

CSS Grid ist noch sehr neu. Ich habe immer noch Probleme damit, zu verstehen, wie die Hälfte dieses Materials hinter den Kulissen funktioniert.

Jede Hilfe wird geschätzt. Danke im Voraus.

3
realph

In Ihrem ersten Beispiel sind Ihre Datenzellen Kinder des Containers. Daher funktionieren Rastereigenschaften - die nur zwischen Eltern und Kind funktionieren - wie erwartet.

In Ihrem second-Beispiel haben Sie einige Datenzellen, die Kinder von .row-Containern sind. Diese Zellen sind nicht mehr untergeordnete Elemente des Raster-Containers .wrapper. Daher liegen diese Zellen außerhalb des Bereichs des Rasterlayouts, erkennen keine Gittereigenschaften und werden als Standardelemente auf Blockebene dargestellt.

Raster-Container mit verschiedenen untergeordneten Elementen rendern also grundsätzlich unterschiedliche Layouts.

Eine Lösung für die Übereinstimmung Ihrer Beispiele besteht darin, die Gitterelemente in Gittercontainer mit den gleichen Eigenschaften wie die übergeordneten Objekte zu bringen. Hier ist die allgemeine Idee:

Überarbeitete Codepen

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
}

div:nth-child(4) { grid-row-start: 2; }
div:nth-child(5) { grid-row-start: 3; }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

5
Michael_B

Es hat nicht gebrochen, es funktioniert genau wie vorgesehen .. Jedes untergeordnete Element verwendet eine Zelle des Gitters, wenn Sie die Kopfzeile in ein anderes div einbetten, werden sie Zeilen für Spalten austauschen, da jede Gruppe eine verwendet Zelle.

Wenn Sie Tabellendaten anzeigen möchten, sollten Sie sich an Tabellen halten, da sie das semantisch korrekte Element für diesen Zweck sind.

Wenn Sie jedoch versuchen, responsive Designs zu erstellen oder wirklich ein Raster verwenden möchten, schlage ich Ihnen vor, diesen unglaublichen Artikel über CSS-Grids zu lesen. 

Werfen Sie einen Blick in display: subgrid; Vielleicht suchen Sie in diesem Szenario.

0
Francis Schiavo