web-dev-qa-db-de.com

Wie soll ein CSS "display: table-column" funktionieren?

Angesichts des folgenden HTML- und CSS-Codes sehe ich absolut nichts in meinem Browser (Chrome und IE zum Zeitpunkt des Schreibens). Alles bricht auf 0x0 px zusammen. Warum?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>
78
Eliot

Das CSS-Tabellenmodell basiert auf dem HTML-Tabellenmodell http://www.w3.org/TR/CSS21/tables.html

Eine Tabelle ist in ROWS unterteilt und jede Zeile enthält eine oder mehrere Zellen. Zellen sind Kinder von ROWS, sie sind NIE Kinder von Spalten.

"display: table-column" bietet KEINEN Mechanismus zum Erstellen von Spaltenlayouts (z. B. Zeitungsseiten mit mehreren Spalten, bei denen der Inhalt von einer Spalte zur nächsten fließen kann).

"Table-column" legt NUR Attribute fest, die für die entsprechenden Zellen in den Zeilen einer Tabelle gelten. Z.B. "Die Hintergrundfarbe der ersten Zelle in jeder Zeile ist grün" kann beschrieben werden.

Die Tabelle selbst ist immer so aufgebaut wie in HTML.

In HTML (beachten Sie, dass "td" in "tr" und NICHT in "col" enthalten sind):

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

Entsprechendes HTML unter Verwendung von CSS-Tabelleneigenschaften (Beachten Sie, dass die "Spalten" -Divs keine Inhalte enthalten - der Standard erlaubt keine Inhalte 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 durch Zuweisen mehrerer Klassen zu jeder Zeile und Zelle wie folgt formatiert werden. Dieser Ansatz bietet maximale Flexibilität bei der Angabe verschiedener Gruppen von Zellen oder einzelner Zellen, die formatiert 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 verwenden, ist es ratsam, some Klasse in jedes div zu setzen, um den Verweis darauf zu erleichtern. Hier wurde das, was in HTML <tr> war, class myrow, und <td> wurde class mycell. Diese Konvention macht die obigen CSS-Selektoren nützlich.

PERFORMANCE NOTE : Das Einfügen von Klassennamen in jede Zelle und die Verwendung der oben genannten Selektoren für mehrere Klassen ist leistungsfähiger als die Verwendung von Selektoren, die mit * enden, z. B. .row1 * oder sogar .row1 > *. Der Grund dafür ist, dass Selektoren mit last first abgeglichen werden. Wenn also nach übereinstimmenden Elementen gesucht wird, führt .row1 * zuerst * aus, was mit = übereinstimmt all elements, und überprüft dann all die Vorfahren jedes Elements , um festzustellen, ob ein Vorfahr class row1 hat. Dies kann in einem komplexen Dokument auf einem langsamen Gerät langsam sein. .row1 > * ist besser, weil nur der unmittelbare Elternteil untersucht wird. Es ist jedoch viel besser, die meisten Elemente sofort über .row1 .cell1 zu entfernen. (.row1 > .cell1 ist eine noch engere Spezifikation, aber es ist der erste Schritt der Suche, der den größten Unterschied ausmacht. Daher lohnt es sich normalerweise nicht, darüber nachzudenken, ob dies immer der Fall sein wird sei ein direktes Kind, indem du den Child Selector > hinzufügst.)

Der entscheidende Punkt, um re performance zu entfernen, ist, dass das last -Element in einem Selektor as specific sein sollte wie möglich und sollte niemals * sein.

107
ToolmakerSteve

Der Anzeigetyp "Tabellenspalte" bedeutet, dass er sich wie das Tag <col> In HTML verhält - d. H. Ein unsichtbares Element, dessen Breite * die Breite der entsprechenden physischen Spalte der umschließenden Tabelle bestimmt.

Siehe der W3C-Standard für weitere Informationen zum CSS-Tabellenmodell.

* Und ein paar andere Eigenschaften wie Rahmen, Hintergründe.

22
Random832