Como e por que usar “display: table-cell” em CSS

Pode-se notar que os dados foram adicionados com sucesso:

Etapa 2: estilize o contêiner de “conteúdo da tabela”

Para acessar o div principal, utilize o “ #tabela-conteúdo ', onde ' # ” é um seletor usado para acessar o “ eu ia ” do contêiner div. Em seguida, aplique as seguintes propriedades:

Aqui:

• • O ' mostrar ” define e determina a aparência de um elemento. Para isso, o valor desta propriedade é definido como “ mesa ” para fazer a mesa.
  • “ preenchimento ” aloca o espaço dentro do contêiner.

Etapa 3: estilize o contêiner 'tr-div'

Agora, estilize o “ tr-div ” recipiente da seguinte forma:

De acordo com o bloco de código acima, o “ mostrar ” o valor da propriedade é definido como “ linha da tabela ” o que significa que os dados são definidos na forma de linhas em uma tabela, “ cor de fundo ” propriedade é utilizada para especificar a cor na parte de trás do elemento e, por último, “ preenchimento ' é aplicado:

Etapa 4: aplicar a propriedade “display: table-cell” no contêiner “td-div”

Acesse o terceiro div com a ajuda de “ .td-div ” ponto selectivo e o respectivo id, e aplique as propriedades CSS abaixo:

• • O valor do “ mostrar ” propriedade é definida como “ tabela-célula ” que é utilizado para criar a célula e adicionar dados à célula.
  • “ largura ” especifica o tamanho da célula da tabela horizontalmente.
  • “ fronteira ” define um limite em torno das células.
  • “ margem ” aloca o espaço fora da borda definida.
  • “ preenchimento ” especifica o espaço dentro do limite.

Saída

Por que usar “display: table-cell” em CSS?

O ' exibição: tabela-célula ” A propriedade CSS é usada para definir uma exibição de dados que faz com que o elemento se comporte como uma tabela. Assim, os usuários podem criar uma duplicata de uma tabela em HTML sem utilizar o elemento table e outros elementos, incluindo td e tr. Mais especificamente, sua propriedade define os dados na forma de uma tabela.

Conclusão

Para usar o “ exibição: tabela-célula ” propriedade CSS, crie contêineres div aninhados e insira uma classe em cada contêiner com um nome específico. Em seguida, acesse o container div em CSS, e aplique a propriedade “display: table-cell”, onde o “ mostrar ” é utilizada para definir os dados nas células da tabela. Este post demonstrou o método para utilizar a propriedade CSS display:table-cell.