Pregunta ¿Cómo se supone que funciona un CSS "display: table-column"?


Dado el siguiente HTML y CSS, no veo absolutamente nada en mi navegador (Chrome e IE son los más recientes al momento de escribir). Todo colapsa a 0x0 px. ¿Por qué?

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

74
2017-10-01 00:53


origen


Respuestas:


El modelo de tabla CSS se basa en el modelo de tabla HTML http://www.w3.org/TR/CSS21/tables.html

Una tabla se divide en ROWS, y cada fila contiene una o más celdas. Las células son hijos de ROWS, NUNCA son hijos de columnas.

"display: table-column" NO proporciona un mecanismo para hacer diseños en columnas (por ejemplo, páginas de periódicos con múltiples columnas, donde el contenido puede fluir de una columna a la siguiente).

Más bien, "tabla-columna" SÓLO establece los atributos que se aplican a las celdas correspondientes dentro de las filas de una tabla. P.ej. "El color de fondo de la primera celda en cada fila es verde" se puede describir.

La tabla en sí está siempre estructurada de la misma manera que en HTML.

En HTML (tenga en cuenta que "td" s están dentro de "tr" s, NO dentro de "col" s):

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

HTML correspondiente utilizando las propiedades de la tabla CSS (Tenga en cuenta que los divs "columna" no contienen ningún contenido, el estándar no permite contenido directamente en columnas):

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



OPCIONAL: tanto las "filas" como las "columnas" se pueden diseñar asignando varias clases a cada fila y celda de la siguiente manera. Este enfoque brinda la máxima flexibilidad al especificar varios conjuntos de celdas, o celdas individuales, para diseñar:

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

En los diseños flexibles de hoy, que usan <div> para múltiples propósitos, es aconsejable poner algunos clase en cada div, para ayudar a referirse a ella. Aquí, lo que solía ser <tr> en HTML se convirtió class myrowy <td> convirtió class mycell. Esta convención es lo que hace que los selectores de CSS anteriores sean útiles.

NOTA DE RENDIMIENTO: poner nombres de clase en cada celda, y usar los selectores de clases múltiples anteriores, es un mejor rendimiento que usar selectores que terminan con *, como .row1 * o incluso .row1 > *. La razón es que los selectores coinciden último primero, por lo tanto, cuando se buscan elementos coincidentes, .row1 * primero hace *, que coincide todas elementos, y luego verifica todos los antepasados ​​de cada elemento, para encontrar si algún antepasado tiene class row1. Esto podría ser lento en un documento complejo en un dispositivo lento. .row1 > * es mejor, porque solo se examina al padre inmediato. Pero es mucho mejor aún eliminar de inmediato la mayoría de los elementos, a través de .row1 .cell1. (.row1 > .cell1 es una especificación aún más estricta, pero es el primer paso de la búsqueda que hace la mayor diferencia, por lo que generalmente no vale la pena el desorden, y el proceso de pensamiento adicional en cuanto a si siempre será un niño directo, de agregar el selector de niños >.)

El punto clave para llevarnos actuación es que el último el elemento en un selector debe ser tan específico como sea posibley nunca debería ser *.


97
2017-12-21 02:27



El tipo de visualización "columna de tabla" significa que actúa como <col>etiqueta en HTML, es decir, un elemento invisible cuyo ancho * rige el ancho de la columna física correspondiente de la tabla adjunta.

Ver el estándar W3C para obtener más información sobre el modelo de tabla CSS.

* Y algunas otras propiedades como bordes, fondos.


22
2017-10-01 00:57