Jak powinien działać CSS „display: table-column”?

Question 1

Biorąc pod uwagę następujący kod HTML i CSS, nie widzę absolutnie nic w mojej przeglądarce (Chrome i IE najpóźniej w momencie pisania). Wszystko zwija się do 0x0 px. Czemu?

<!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>

Question 2

Model tabeli CSS jest oparty na modelu tabeli HTML http://www.w3.org/TR/CSS21/tables.html

Tabela jest podzielona na WIERSZE, a każdy wiersz zawiera jedną lub więcej komórek. Komórki są elementami podrzędnymi ROWS, NIGDY nie są elementami podrzędnymi kolumn.

"display: table-column" NIE zapewnia mechanizmu tworzenia układów kolumnowych (np. stron gazet z wieloma kolumnami, gdzie treść może przepływać z jednej kolumny do następnej).

Zamiast tego „tabela-kolumna” TYLKO ustawia atrybuty, które mają zastosowanie do odpowiednich komórek w wierszach tabeli. Można na przykład opisać „Kolor tła pierwszej komórki w każdym wierszu jest zielony”.

Sama tabela ma zawsze taką samą strukturę jak w HTML.

W HTML (zwróć uwagę, że „td” znajdują się wewnątrz „tr”, NIE wewnątrz „col”):

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

Odpowiedni kod HTML wykorzystujący właściwości tabeli CSS (zwróć uwagę, że elementy div „column” nie zawierają żadnej treści - standard nie zezwala na zawartość bezpośrednio w kolumnach):

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

Rozwiń fragment

OPCJONALNIE : można nadać styl zarówno „wierszom”, jak i „kolumnom”, przypisując wiele klas do każdego wiersza i komórki w następujący sposób. Takie podejście zapewnia maksymalną elastyczność w określaniu różnych zestawów komórek lub pojedynczych komórek, które mają być stylizowane:

//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>

Rozwiń fragment

W dzisiejszych elastycznych projektach, które są używane <div>do wielu celów, rozsądnie jest umieścić pewną klasę dla każdego elementu DIV, aby pomóc się do niego odnieść. Tutaj to, co było <tr>w HTML, stało się class myrowi <td>stało się class mycell. To właśnie ta konwencja sprawia, że powyższe selektory CSS są przydatne.

WSKAZÓWKA DOTYCZĄCA WYDAJNOŚCI : umieszczenie nazw klas w każdej komórce i użycie powyższych selektorów wieloklasowych zapewnia lepszą wydajność niż użycie selektorów kończących się na *, takich jak .row1 *lub nawet .row1 > *. Powodem jest to, że selektory są dopasowywane jako pierwsze , więc gdy szukane są pasujące elementy, .row1 *najpierw robi to *, co dopasowuje wszystkie elementy, a następnie sprawdza wszystkich przodków każdego elementu , aby sprawdzić, czy któryś z przodków ma class row1. Może to być powolne w przypadku złożonego dokumentu na wolnym urządzeniu. .row1 > *jest lepsze, ponieważ badany jest tylko bezpośredni rodzic. Ale o wiele lepiej jest natychmiastowo wyeliminować większość elementów za pomocą .row1 .cell1. (.row1 > .cell1jest jeszcze ściślejszą specyfikacją, ale to pierwszy krok wyszukiwania robi największą różnicę, więc zwykle nie jest warta bałaganu i dodatkowego procesu myślowego, czy zawsze będzie to bezpośrednie dziecko, dodając selektor dziecka >).

Kluczową kwestią do usunięcia ponownej wydajności jest to, że ostatnia pozycja w selektorze powinna być jak najbardziej szczegółowa i nigdy nie powinna *.

Question 3

Typ wyświetlania „tabela-kolumna” oznacza, że zachowuje się jak <col>znacznik w HTML - tj. Niewidoczny element, którego szerokość * decyduje o szerokości odpowiedniej fizycznej kolumny otaczającej tabeli.

Więcej informacji o modelu tabeli CSS można znaleźć w standardzie W3C .

* I kilka innych właściwości, takich jak obramowania, tła.

Answer 1

Biorąc pod uwagę następujący kod HTML i CSS, nie widzę absolutnie nic w mojej przeglądarce (Chrome i IE najpóźniej w momencie pisania). Wszystko zwija się do 0x0 px. Czemu?

<!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>

Answer 2

Model tabeli CSS jest oparty na modelu tabeli HTML http://www.w3.org/TR/CSS21/tables.html

Tabela jest podzielona na WIERSZE, a każdy wiersz zawiera jedną lub więcej komórek. Komórki są elementami podrzędnymi ROWS, NIGDY nie są elementami podrzędnymi kolumn.

"display: table-column" NIE zapewnia mechanizmu tworzenia układów kolumnowych (np. stron gazet z wieloma kolumnami, gdzie treść może przepływać z jednej kolumny do następnej).

Zamiast tego „tabela-kolumna” TYLKO ustawia atrybuty, które mają zastosowanie do odpowiednich komórek w wierszach tabeli. Można na przykład opisać „Kolor tła pierwszej komórki w każdym wierszu jest zielony”.

Sama tabela ma zawsze taką samą strukturę jak w HTML.

W HTML (zwróć uwagę, że „td” znajdują się wewnątrz „tr”, NIE wewnątrz „col”):

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

Odpowiedni kod HTML wykorzystujący właściwości tabeli CSS (zwróć uwagę, że elementy div „column” nie zawierają żadnej treści - standard nie zezwala na zawartość bezpośrednio w kolumnach):

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

Rozwiń fragment

OPCJONALNIE : można nadać styl zarówno „wierszom”, jak i „kolumnom”, przypisując wiele klas do każdego wiersza i komórki w następujący sposób. Takie podejście zapewnia maksymalną elastyczność w określaniu różnych zestawów komórek lub pojedynczych komórek, które mają być stylizowane:

//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>

Rozwiń fragment

W dzisiejszych elastycznych projektach, które są używane <div>do wielu celów, rozsądnie jest umieścić pewną klasę dla każdego elementu DIV, aby pomóc się do niego odnieść. Tutaj to, co było <tr>w HTML, stało się class myrowi <td>stało się class mycell. To właśnie ta konwencja sprawia, że powyższe selektory CSS są przydatne.

WSKAZÓWKA DOTYCZĄCA WYDAJNOŚCI : umieszczenie nazw klas w każdej komórce i użycie powyższych selektorów wieloklasowych zapewnia lepszą wydajność niż użycie selektorów kończących się na *, takich jak .row1 *lub nawet .row1 > *. Powodem jest to, że selektory są dopasowywane jako pierwsze , więc gdy szukane są pasujące elementy, .row1 *najpierw robi to *, co dopasowuje wszystkie elementy, a następnie sprawdza wszystkich przodków każdego elementu , aby sprawdzić, czy któryś z przodków ma class row1. Może to być powolne w przypadku złożonego dokumentu na wolnym urządzeniu. .row1 > *jest lepsze, ponieważ badany jest tylko bezpośredni rodzic. Ale o wiele lepiej jest natychmiastowo wyeliminować większość elementów za pomocą .row1 .cell1. (.row1 > .cell1jest jeszcze ściślejszą specyfikacją, ale to pierwszy krok wyszukiwania robi największą różnicę, więc zwykle nie jest warta bałaganu i dodatkowego procesu myślowego, czy zawsze będzie to bezpośrednie dziecko, dodając selektor dziecka >).

Kluczową kwestią do usunięcia ponownej wydajności jest to, że ostatnia pozycja w selektorze powinna być jak najbardziej szczegółowa i nigdy nie powinna *.

Answer 3

Nie próbowałem tego osobiście, ale widziałem zalecenia dotyczące tanalin.com/en/projects/display-table-htc, które jest rozwiązaniem javascript dla IE6 i IE7. Po uruchomieniu javascript konwertuje stronę na starsze tagi tabeli HTML.

ToolmakerSteve

Answer 4

Rozwiązanie działa na IE8 +, Firefox, Chrome, iPad, Android. Jest to dobry sposób na uniknięcie układu tabel, jeśli potrzebujesz elastycznej struktury tabeli i korzystasz z nowszych przeglądarek wymienionych powyżej.

mbokil

Answer 5

<col style="color: red;" >nie jest praca, ale <col style="background-color: red;" >jest ok! co w tym złego?

xgqfrms

Answer 6

@xgqfrms: Kolor musi być nadpisywany przez inną regułę CSS. Prawdopodobnie reguła zastosowana do elementu wewnątrz twoich komórek. Na przykład, jeśli twój tekst jest wewnątrz <p>, to gdzieś masz bardziej szczegółowe ustawienie reguły <p> kolor. Spróbuj <col style="color: red !important;">. Jeśli to zadziała, to jest problem. Jednak nie nabieraj nawyku nadużywania !important. Po obejrzeniu tej pracy najlepiej ją usunąć i znaleźć bardziej szczegółowy selektor, który ma mieć pierwszeństwo. google „css more specific selector” lub zobacz smashingmagazine.com/2007/07/…

ToolmakerSteve

Answer 7

23

Typ wyświetlania „tabela-kolumna” oznacza, że zachowuje się jak <col>znacznik w HTML - tj. Niewidoczny element, którego szerokość * decyduje o szerokości odpowiedniej fizycznej kolumny otaczającej tabeli.

Więcej informacji o modelu tabeli CSS można znaleźć w standardzie W3C .

* I kilka innych właściwości, takich jak obramowania, tła.

Losowo 832
źródło

2

Jeśli colelement ma strukturę logiczną, co ma, to jak można uzasadnić użycie reguły CSS display: table-column;, która ma tylko strukturę prezentacyjną? Zgodnie ze specyfikacją display( w3.org/wiki/CSS/Properties/display ) ma on „zachowywać się” jak colelement. Ale nie rozumiem, jak to jest przydatne ...

chharvey

1

@ TestSubject528491 Ponieważ wtedy możesz ustawić tło kolumny, szerokość kolumny itp. Tabeli [prezentacyjnej]. Ale tak naprawdę jest to najbardziej przydatne w zakresie określania domyślnej reguły stylu dla samego <col>tagu lub równoważnego tagu w innym języku znaczników opartym na XML.

Random832

@chharvey: HTML coljest elementem logicznym , który zawiera tylko styl prezentacji . Nie możesz w nim umieścić kolumny informacji - to częste nieporozumienie. Dane tabeli są zawsze w wierszach. display: table-column;konwertuje element logiczny (zwykle a div) na plik col. Powoduje to, że inne pola stylu przypisane do tego elementu mają zastosowanie do koncepcji prezentacji „kolumna”. Rezultatem jest element logiczny, który nie jest wyświetlany i którego zawartość, jeśli istnieje, jest ignorowana; jego jedynym efektem jest nadanie stylu „kolumnom” powiązanej prezentacji. Zobacz moją odpowiedź na szablon.

ToolmakerSteve,

Answer 8

2

Jeśli colelement ma strukturę logiczną, co ma, to jak można uzasadnić użycie reguły CSS display: table-column;, która ma tylko strukturę prezentacyjną? Zgodnie ze specyfikacją display( w3.org/wiki/CSS/Properties/display ) ma on „zachowywać się” jak colelement. Ale nie rozumiem, jak to jest przydatne ...

chharvey

Answer 9

1

@ TestSubject528491 Ponieważ wtedy możesz ustawić tło kolumny, szerokość kolumny itp. Tabeli [prezentacyjnej]. Ale tak naprawdę jest to najbardziej przydatne w zakresie określania domyślnej reguły stylu dla samego <col>tagu lub równoważnego tagu w innym języku znaczników opartym na XML.

Random832

Answer 10

@chharvey: HTML coljest elementem logicznym , który zawiera tylko styl prezentacji . Nie możesz w nim umieścić kolumny informacji - to częste nieporozumienie. Dane tabeli są zawsze w wierszach. display: table-column;konwertuje element logiczny (zwykle a div) na plik col. Powoduje to, że inne pola stylu przypisane do tego elementu mają zastosowanie do koncepcji prezentacji „kolumna”. Rezultatem jest element logiczny, który nie jest wyświetlany i którego zawartość, jeśli istnieje, jest ignorowana; jego jedynym efektem jest nadanie stylu „kolumnom” powiązanej prezentacji. Zobacz moją odpowiedź na szablon.

ToolmakerSteve,

Jak powinien działać CSS „display: table-column”?

Odpowiedzi: