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

86

In Anbetracht des folgenden HTML und CSS sehe ich absolut nichts in meinem Browser (Chrome und IE zum Zeitpunkt des Schreibens). Alles kollabiert auf 0x0 px. 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>
css tablelayout css-tables Eliot
quelle

Antworten:

115

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

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 *.

ToolmakerSteve
quelle
Ich habe es selbst nicht versucht, aber ich habe Empfehlungen für tanalin.com/en/projects/display-table-htc gesehen , eine Javascript-Lösung für IE6 und IE7. Wenn das Javascript ausgeführt wird, konvertiert es die Seite in die älteren HTML-Tabellen-Tags.
ToolmakerSteve
Die Lösung funktioniert unter IE8 +, Firefox, Chrome, iPad und Android. Dies ist eine gute Möglichkeit, Tabellenlayouts zu vermeiden, wenn Sie eine flexible Struktur einer Tabelle benötigen und modernere Browser unterstützen, die oben aufgeführt sind.
mbokil
Das <col style="color: red;" >funktioniert nicht, aber das <col style="background-color: red;" >ist in Ordnung! Was ist daran falsch?
xgqfrms
@xgqfrms: Eine andere CSS-Regel muss die Farbe überschreiben. Wahrscheinlich eine Regel, die auf ein Element in Ihren Zellen angewendet wird. Wenn sich Ihr Text beispielsweise in <p> befindet, haben Sie irgendwo eine spezifischere Regeleinstellung <p>. Versuchen Sie es <col style="color: red !important;">. Wenn dies funktioniert, ist das das Problem. Gewöhnen Sie sich jedoch nicht an, zu viel zu verwenden !important. Nachdem Sie diese Arbeit gesehen haben, entfernen Sie sie am besten und finden Sie einen spezifischeren Selektor heraus, der Vorrang hat. Google "CSS spezifischer Selektor", oder siehe smashingmagazine.com/2007/07/…
ToolmakerSteve
23

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

Weitere Informationen zum CSS-Tabellenmodell finden Sie im W3C-Standard .

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

Random832
quelle
2
Wenn das colElement eine logische Struktur hat, was es dann tut, wie rechtfertigt man die Verwendung der CSS-Regel display: table-column;, die nur eine Präsentationsstruktur hat? Gemäß den Spezifikationen auf display( w3.org/wiki/CSS/Properties/display ) soll es sich wie ein colElement "verhalten" . Aber ich kann nicht sehen, wie nützlich das ist ...
chharvey
1
@ TestSubject528491 Da können Sie dann den Spaltenhintergrund, die Spaltenbreite usw. einer [Präsentations-] Tabelle festlegen. Aber wirklich ist es meistens nützlich, um die Standardstilregel für das <col>Tag selbst oder ein gleichwertiges Tag in einer anderen XML-basierten Auszeichnungssprache anzugeben .
Random832
@chharvey: HTML colist ein logisches Element, das nur Präsentationsstil enthält . Sie können keine Informationsspalte einfügen - dies ist ein häufiges Missverständnis. Tabellendaten sind immer in Zeilen. display: table-column;konvertiert ein logisches Element (normalerweise a div) in ein col. Dadurch werden andere Stilelemente, die diesem Element zugewiesen sind, auf das Präsentationskonzept "eine Spalte" angewendet. Das Ergebnis ist ein logisches Element, das nicht angezeigt wird und dessen Inhalt, falls vorhanden, ignoriert wird. Der einzige Effekt besteht darin, den Stil auf "Spalten" der zugehörigen Präsentation anzuwenden. Siehe meine Antwort für eine Vorlage.
ToolmakerSteve