Come dovrebbe funzionare un CSS "display: table-column"?


87

Dati i seguenti HTML e CSS, non vedo assolutamente nulla nel mio browser (Chrome e IE più recenti al momento della scrittura). Tutto crolla a 0x0 px. Perché?

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

Risposte:


118

Il modello di tabella CSS si basa sul modello di tabella HTML http://www.w3.org/TR/CSS21/tables.html

Una tabella è divisa in RIGHE e ogni riga contiene una o più celle. Le celle sono figlie di RIGHE, non sono MAI figlie di colonne.

"display: table-column" NON fornisce un meccanismo per creare layout a colonne (es. pagine di giornale con più colonne, dove il contenuto può fluire da una colonna all'altra).

Piuttosto, "tabella-colonna" imposta SOLO gli attributi che si applicano alle celle corrispondenti all'interno delle righe di una tabella. Ad esempio "Il colore di sfondo della prima cella di ogni riga è verde" può essere descritto.

La tabella stessa è sempre strutturata nello stesso modo in cui è in HTML.

In HTML (osserva che "td" sono all'interno di "tr", NON all'interno di "col"):

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

HTML corrispondente utilizzando le proprietà della tabella CSS (Nota che i div "colonna" non contengono alcun contenuto - lo standard non consente i contenuti direttamente nelle colonne):

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



FACOLTATIVO : sia le "righe" che le "colonne" possono essere stilizzate assegnando più classi a ogni riga e cella come segue. Questo approccio offre la massima flessibilità nello specificare vari set di celle, o singole celle, a cui applicare lo stile:

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

Nei progetti flessibili odierni, che vengono utilizzati <div>per molteplici scopi, è saggio mettere un po 'di classe su ogni div, per fare riferimento ad esso. Qui, quello che era <tr>in HTML è diventato class myrowe è <td>diventato class mycell. Questa convenzione è ciò che rende utili i suddetti selettori CSS.

NOTA SULLE PRESTAZIONI : mettere i nomi delle classi su ogni cella e usare i selettori multi-classe di cui sopra, è una prestazione migliore rispetto all'uso dei selettori che terminano con *, come .row1 *o anche .row1 > *. Il motivo è che i selettori vengono abbinati per ultimi per primi , quindi quando vengono cercati elementi corrispondenti, .row1 *prima lo fa *, che corrisponde a tutti gli elementi, quindi controlla tutti gli antenati di ogni elemento , per trovare se un antenato ha class row1. Questo potrebbe essere lento in un documento complesso su un dispositivo lento. .row1 > *è meglio, perché viene esaminato solo il genitore diretto. Ma è ancora molto meglio eliminare immediatamente la maggior parte degli elementi, tramite .row1 .cell1. (.row1 > .cell1è una specifica ancora più rigorosa, ma è il primo passo della ricerca che fa la differenza più grande, quindi di solito non vale la pena, e il processo di riflessione extra sul fatto che sarà sempre un figlio diretto, di aggiungere il selettore figlio >.)

Il punto chiave per togliere la performance è che l' ultimo elemento in un selettore dovrebbe essere il più specifico possibile e non dovrebbe mai esserlo *.


Non l'ho provato da solo, ma ho visto consigli per tanalin.com/en/projects/display-table-htc che è una soluzione javascript per IE6 e IE7. Quando javascript viene eseguito, converte la pagina nei vecchi tag della tabella HTML.
ToolmakerSteve

La soluzione funziona su IE8 +, Firefox, Chrome, iPad, Android. È un buon modo per evitare i layout delle tabelle se hai bisogno di una struttura flessibile di una tabella e stai supportando i browser più moderni sopra elencati.
mbokil

il <col style="color: red;" >non è lavoro, ma il <col style="background-color: red;" >è ok! cosa c'è di sbagliato in questo?
xgqfrms

@xgqfrms: qualche altra regola CSS deve sovrascrivere il colore. Probabilmente una regola applicata a un elemento all'interno delle tue celle. Ad esempio, se il tuo testo è all'interno di <p>, allora da qualche parte hai un'impostazione di regola più specifica <p> colore. Prova <col style="color: red !important;">. Se funziona, questo è il problema. Tuttavia , non prendere l'abitudine di abusare !important. Dopo aver visto il lavoro, è meglio rimuoverlo e trovare un selettore più specifico per avere la precedenza. google "css selettore più specifico", o vedi smashingmagazine.com/2007/07/…
ToolmakerSteve

23

Il tipo di visualizzazione "tabella-colonna" significa che si comporta come il <col> tag in HTML, cioè un elemento invisibile la cui larghezza * governa la larghezza della colonna fisica corrispondente della tabella che lo racchiude.

Vedere lo standard W3C per ulteriori informazioni sul modello di tabella CSS.

* E poche altre proprietà come bordi, sfondi.


2
Se l' colelemento ha una struttura logica, che ha, allora come si giustifica l'uso della regola CSS display: table-column;, che ha solo una struttura di presentazione? Secondo le specifiche su display( w3.org/wiki/CSS/Properties/display ), dovrebbe "comportarsi" come un colelemento. Ma non vedo quanto sia utile ...
Chharvey

1
@ TestSubject528491 Perché allora puoi impostare lo sfondo della colonna, la larghezza della colonna, ecc. Di una tabella [di presentazione]. Ma in realtà è principalmente utile in termini di specifica della regola di stile predefinita per il <col>tag stesso o un tag equivalente in un diverso linguaggio di markup basato su XML.
Casuale 832

@chharvey: HTML colè un elemento logico che contiene solo uno stile di presentazione . Non puoi inserire una colonna di informazioni in esso: questo è un malinteso comune. I dati della tabella sono sempre in righe. display: table-column;converte un elemento logico (tipicamente a div) in un file col. Fa sì che altri campi di stile assegnati a quell'elemento vengano applicati al concetto di presentazione "una colonna". Il risultato è un elemento logico che non viene visualizzato e il cui contenuto, se presente, viene ignorato; il suo unico effetto è applicare lo stile alle "colonne" della presentazione associata. Vedi la mia risposta per un modello.
ToolmakerSteve
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.