studio - th css
¿Cómo se supone que funciona un CSS "display: table-column"? (2)
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>
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. Por ejemplo, "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 "filas" como "columnas" se pueden diseñar asignando múltiples 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 en día, que usan <div> para múltiples propósitos, es aconsejable poner algo de clase en cada div, para ayudar a referirse a él. Aquí, lo que solía ser <tr> en HTML se convirtió en class myrow , y <td> convirtió en 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 primero el último , por lo que cuando se buscan elementos coincidentes, .row1 * primero * , que coincide con todos los elementos, y luego verifica todos los antecesores 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 reflexión adicional sobre si siempre será una hijo directo, de agregar el selector de niños > .)
El punto clave para quitar rendimiento es que el último elemento de un selector debe ser lo más específico posible y nunca debe ser * .
El tipo de visualización "columna de tabla" significa que actúa como la etiqueta <col> en HTML, es decir, un elemento invisible cuyo ancho * rige el ancho de la columna física correspondiente de la tabla adjunta.
Consulte http://www.w3.org/TR/CSS21/tables.html para obtener más información sobre el modelo de tabla CSS.
* Y algunas otras propiedades como bordes, fondos.