web-dev-qa-db-fra.com

Comment un CSS "display: table-column" est-il censé fonctionner?

Étant donné les codes HTML et CSS suivants, je ne vois absolument rien dans mon navigateur (Chrome et IE au plus tard au moment de la rédaction)). Tout se réduit en 0x0 px. Pourquoi?

<!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>
csstablelayoutcss-tables
78
Eliot

Le modèle de table CSS est basé sur le modèle de table HTML http://www.w3.org/TR/CSS21/tables.html

Un tableau est divisé en ROWS et chaque ligne contient une ou plusieurs cellules. Les cellules sont des enfants de ROWS, elles ne sont JAMAIS des enfants de colonnes.

"display: table-column" NE fournit PAS un mécanisme pour créer des présentations en colonnes (par exemple, des pages de journal avec plusieurs colonnes, où le contenu peut circuler d'une colonne à la suivante).

Plutôt, "table-colonne" définit UNIQUEMENT les attributs qui s'appliquent aux cellules correspondantes dans les lignes d'un tableau. Par exemple. "La couleur d'arrière-plan de la première cellule de chaque ligne est verte" peut être décrite.

La table elle-même est toujours structurée de la même manière qu'en HTML.

En HTML (notez que "td" est dans "tr", PAS dans "col"):

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

HTML correspondant à l'aide des propriétés de la table CSS (notez que les divs "column" ne contiennent aucun contenu - la norme n'autorise pas le contenu directement dans les colonnes):

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

[~ # ~] facultatif [~ # ~] : les "lignes" et les "colonnes" peuvent être stylisées en affectant plusieurs classes à chaque ligne et cellule. comme suit. Cette approche offre un maximum de flexibilité pour spécifier différents ensembles de cellules, ou cellules individuelles, à styler:

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

Dans les conceptions flexibles d'aujourd'hui, qui utilisent <div> _ à des fins multiples, il est sage de mettre certains classe sur chaque div, pour aider à s'y référer. Ici, quel était jadis <tr> en HTML est devenu class myrow, et <td> est devenu class mycell. Cette convention est ce qui rend les sélecteurs CSS ci-dessus utiles.

NOTE DE PERFORMANCES : attribuer des noms de classe à chaque cellule et utiliser les sélecteurs multi-classes ci-dessus est meilleur que d'utiliser des sélecteurs se terminant par *, tel que .row1 * ou même .row1 > *. La raison en est que les sélecteurs sont mis en correspondance en dernier en premier . Ainsi, lorsque des éléments correspondants sont recherchés, .row1 * _ fait d'abord *, qui correspond à tous les éléments , puis vérifie tous les ancêtres de chaque élément , pour trouver si un ancêtre a class row1. Cela peut être lent dans un document complexe sur un périphérique lent. .row1 > * est préférable, car seul le parent immédiat est examiné. Mais il vaut bien mieux éliminer immédiatement la plupart des éléments, via .row1 .cell1. (.row1 > .cell1 est une spécification encore plus stricte, mais c’est la première étape de la recherche qui fait la plus grande différence; elle ne vaut donc généralement pas le fouillis, et le processus de réflexion supplémentaire pour savoir si elle sera toujours un enfant direct, ajout du sélecteur d'enfants >.)

Le point clé à retenir des performances est que le dernier élément de un sélecteur doit être aussi spécifique que possible et ne doit jamais être *.

107
ToolmakerSteve

Le type d'affichage "table-colonne" signifie qu'il agit comme le <col> balise en HTML - c’est-à-dire un élément invisible dont la largeur * détermine la largeur de la colonne physique correspondante de la table englobante.

Voir la norme W3C pour plus d'informations sur le modèle de table CSS.

* Et quelques autres propriétés comme les bordures, les arrière-plans.

22
Random832