Como um CSS "display: table-column" deve funcionar?

Em HTML, as tabelas consistem em linhas, com cada linha contendo células. CSS amplia esse conceito, permitindo que os designers definam layouts específicos de linhas e colunas. Embora "display: table-row" e "display: table-cell" sejam diretos, "display: table-column" tem um propósito mais sutil.

Compreendendo a função de "display: table- coluna"

Ao contrário de "display: table-row" e "display: table-cell", "display: table-column" não estabelece uma nova estrutura de coluna. Em vez disso, ele define atributos para células nas linhas existentes da tabela. Por exemplo, você pode especificar a cor de fundo da primeira célula em cada linha.

Estrutura de tabela HTML vs. CSS

Para entender esse conceito, considere o seguinte HTML tabela:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

Correspondente à estrutura HTML, o seguinte CSS pode ser aplicado:

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

Neste exemplo, os divs ".column1" e ".column2" não são contêineres para conteúdo. Eles apenas definem atributos para as células nas linhas da tabela.

Principais pontos a serem lembrados

• "display: table-column" define atributos para células nas linhas da tabela , não para as colunas em si.
• A estrutura da tabela subjacente permanece a mesma do HTML, com as células sendo filhas das linhas.
• "display: table-column" não fornece um mecanismo para multi -layouts de coluna, onde o conteúdo flui entre as colunas.