O modelo de tabela CSS é baseado no modelo de tabela HTML
http://www.w3.org/TR/CSS21/tables.html
Uma tabela é dividida em ROWS e cada linha contém uma ou mais células. As células são filhas de ROWS, NUNCA são filhas de colunas.
"display: table-column" NÃO fornece um mecanismo para fazer layouts em colunas (por exemplo, páginas de jornais com várias colunas, onde o conteúdo pode fluir de uma coluna para a outra).
Em vez disso, "tabela-coluna" SÓ define os atributos que se aplicam às células correspondentes nas linhas de uma tabela. Por exemplo, "A cor de fundo da primeira célula em cada linha é verde" pode ser descrita.
A tabela em si é sempre estruturada da mesma forma que em HTML.
Em HTML (observe que "td" s estão dentro de "tr" s, NÃO dentro de "col" s):
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
HTML correspondente usando propriedades da tabela CSS (observe que os divs "coluna" não contêm nenhum conteúdo - o padrão não permite conteúdo diretamente nas colunas):
.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 : as "linhas" e as "colunas" podem ser estilizadas atribuindo-se várias classes a cada linha e célula da seguinte maneira. Essa abordagem oferece flexibilidade máxima na especificação de vários conjuntos de células, ou células individuais, a serem estilizadas:
//Useful css declarations, depending on what you want to affect, include:
.mycell {
}
.row1 {
}
.row1 .mycell {
}
.row1 .cell1 {
}
.cell1 {
}
.mytable .row1 {
}
.mytable .row1 .mycell {
}
.mytable .row1 .cell1 {
}
.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>
Nos designs flexíveis de hoje, que usam <div>
para vários propósitos, é aconselhável colocar alguma classe em cada div, para ajudar a referenciá-lo. Aqui, o que costumava ser <tr>
em HTML se tornou class myrow
e <td>
se tornou class mycell
. Essa convenção é o que torna os seletores CSS acima úteis.
NOTA DE DESEMPENHO : colocar nomes de classe em cada célula e usar os seletores multiclasse acima é um desempenho melhor do que usar seletores que terminam com *
, como .row1 *
ou uniforme .row1 > *
. O motivo é que os seletores são combinados por último primeiro , portanto, quando os elementos correspondentes estão sendo procurados, .row1 *
primeiro o faz *
, o que corresponde a todos os elementos e, em seguida, verifica todos os ancestrais de cada elemento , para descobrir se algum ancestral o fez class row1
. Isso pode ser lento em um documento complexo em um dispositivo lento. .row1 > *
é melhor, porque apenas o pai imediato é examinado. Mas é muito melhor eliminar imediatamente a maioria dos elementos, via .row1 .cell1
. (.row1 > .cell1
é uma especificação ainda mais restrita, mas é a primeira etapa da pesquisa que faz a maior diferença, então geralmente não vale a desordem e o processo de pensamento extra para saber se sempre será um filho direto, de adicionar o seletor filho >
.)
O ponto chave para tirar o desempenho é que o último item em um seletor deve ser o mais específico possível , e nunca deve ser *
.