¿Cómo se supone que funciona una "pantalla: columna-tabla" de CSS?

En HTML, las tablas constan de filas, cada una de las cuales que contienen células. CSS amplía este concepto y permite a los diseñadores definir diseños de filas y columnas específicos. Mientras que "display: table-row" y "display: table-cell" son sencillos, "display: table-column" tiene un propósito más matizado.

Comprender la función de "display: table- columna"

A diferencia de "display: table-row" y "display: table-cell", "display: table-column" no establece una nueva columna estructura. En cambio, establece atributos para celdas dentro de las filas de la tabla existente. Por ejemplo, puede especificar el color de fondo de la primera celda de cada fila.

Estructura de tabla HTML frente a CSS

Para comprender este concepto, considere el siguiente HTML tabla:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

Correspondiente a la estructura HTML, se puede aplicar el siguiente CSS:

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

En este ejemplo, los divs ".column1" y ".column2" no son contenedores de contenido. Simplemente definen atributos para las celdas dentro de las filas de la tabla.

Puntos clave para recordar

• "display: table-column" establece atributos para las celdas dentro de las filas de la tabla , no para las columnas en sí.
• La estructura de la tabla subyacente sigue siendo la misma que en HTML, siendo las celdas hijas de las filas.
• "display: columna-tabla" no proporciona un mecanismo para diseños de varias columnas, donde el contenido fluye entre columnas.