Das CSS-Tabellenmodell basiert auf dem HTML-Tabellenmodell
http://www.w3.org/TR/CSS21/tables.html
Eine Tabelle ist in REIHEN unterteilt, und jede Zeile enthält eine oder mehrere Zellen. Zellen sind Kinder von ROWS, sie sind NIEMALS Kinder von Spalten.
"display: table-column" bietet KEINEN Mechanismus zum Erstellen von Spaltenlayouts (z. B. Zeitungsseiten mit mehreren Spalten, bei denen Inhalte von einer Spalte zur nächsten fließen können).
Vielmehr legt "Tabellenspalte" NUR Attribute fest, die für entsprechende Zellen in den Zeilen einer Tabelle gelten. ZB "Die Hintergrundfarbe der ersten Zelle in jeder Zeile ist grün" kann beschrieben werden.
Die Tabelle selbst ist immer so strukturiert wie in HTML.
In HTML (beachten Sie, dass sich "td" innerhalb von "tr" befindet, NICHT innerhalb von "col"):
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
Entsprechender HTML-Code mit CSS-Tabelleneigenschaften (Beachten Sie, dass die "Spalten" -Divs keinen Inhalt enthalten - der Standard erlaubt keinen Inhalt direkt in Spalten):
.mytable {
display: table;
}
.myrow {
display: table-row;
}
.mycell {
display: table-cell;
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
}
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>
OPTIONAL : Sowohl "Zeilen" als auch "Spalten" können wie folgt gestaltet werden, indem jeder Zeile und Zelle mehrere Klassen zugewiesen werden. Dieser Ansatz bietet maximale Flexibilität bei der Angabe verschiedener Sätze von Zellen oder einzelner Zellen, die gestaltet werden sollen:
//Useful css declarations, depending on what you want to affect, include:
/* all cells (that have "class=mycell") */
.mycell {
}
/* class row1, wherever it is used */
.row1 {
}
/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}
/* cell1 of row1 */
.row1 .cell1 {
}
/* cell1 of all rows */
.cell1 {
}
/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}
/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}
/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}
/* cell1 of all rows of a mytable */
.mytable .cell1 {
}
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow row1">
<div class="mycell cell1">contents of first cell in row 1</div>
<div class="mycell cell2">contents of second cell in row 1</div>
</div>
<div class="myrow row2">
<div class="mycell cell1">contents of first cell in row 2</div>
<div class="mycell cell2">contents of second cell in row 2</div>
</div>
</div>
In den heutigen flexiblen Designs, die <div>für mehrere Zwecke verwendet werden, ist es ratsam, jedem Div eine Klasse zuzuweisen, um sich darauf zu beziehen. Hier <tr>wurde class myrowund <td>wurde das , was früher in HTML war class mycell. Diese Konvention macht die oben genannten CSS-Selektoren nützlich.
LEISTUNGSHINWEIS : Das Einfügen von Klassennamen in jede Zelle und die Verwendung der oben genannten Mehrklassen-Selektoren ist eine bessere Leistung als die Verwendung von Selektoren, die mit *wie .row1 *oder sogar enden .row1 > *. Der Grund dafür ist , dass Wähler abgestimmt sind zuletzt erst , so dass , wenn passenden Elemente gesucht werden, .row1 *zuerst tut *, was paßt alle Elemente, und prüft dann alle Vorfahren jedes Element , zu finden , wenn jeder Vorfahr hat class row1. Dies kann in einem komplexen Dokument auf einem langsamen Gerät langsam sein. .row1 > *ist besser, weil nur der unmittelbare Elternteil untersucht wird. Aber es ist noch viel besser, die meisten Elemente sofort über zu entfernen .row1 .cell1. (.row1 > .cell1ist eine noch engere Spezifikation, aber es ist der erste Schritt der Suche, der den größten Unterschied macht. Daher ist es normalerweise nicht die Unordnung und den zusätzlichen Gedankenprozess wert, ob es immer ein direktes Kind sein wird, das Hinzufügen der Kinderwähler >.)
Der entscheidende Punkt, um die Leistung zu beeinträchtigen, ist, dass das letzte Element in einem Selektor so spezifisch wie möglich sein sollte und niemals sein sollte *.