Como e por que usar Display-Cell no CSS

Existem várias propriedades CSS para modelar os elementos de HTML. O "mostrar”A propriedade é uma delas, que é utilizada para definir o elemento gerenciado como um elemento em linha ou elemento de bloco. Além disso, o layout utilizado para seus filhos, como fluxo, flexão ou grade. Além disso, esta propriedade aloca os tipos interno e externo para exibir um elemento.

Este post explicará:

• • Como usar "Display: Table-Cell" no CSS?
  • Por que usar "Display: Table-Cell" no CSS?

Como usar "Display: Table-Cell" no CSS?

Para usar o “mostrar”Propriedade com o valor“célula de mesa”, Experimente as instruções fornecidas.

Etapa 1: Faça recipientes de divisão aninhados

Primeiro, crie o contêiner principal da div com a ajuda do “”Tag e insira o“eu ia”Atributo dentro da tag div. Em seguida, entre a tag div, adicione mais recipientes e adicione um “aula”Atributo em cada div:

Herry

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

Etapa 2: contêiner de "conteúdo da tabela" de estilo

Para acessar a div, utilize o “#Table-content", onde "#”É um seletor usado para acessar o especificado“eu ia”Atributo do contêiner Div. Em seguida, aplique as seguintes propriedades:

#Table-content
exibição: tabela;
preenchimento: 7px;

Aqui:

• • O "mostrar”Propriedade define e determina como um elemento parece. Para fazer isso, o valor desta propriedade é definido como “mesa”Para fazer a mesa.
  • ““preenchimento”Aloca o espaço dentro do recipiente.

Etapa 3: Recipiente de estilo “TR-DIV”

Agora, estilize o “tr-div”Contêiner da seguinte forma:

.tr-div
Exibição: tabela-fila;
Background-Color: RGB (164, 241, 215);
preenchimento: 7px;

De acordo com o bloco acima do código, 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”A propriedade é utilizada para especificar a cor na parte traseira do elemento e, finalmente,“preenchimento" é aplicado:

Etapa 4: Aplicar a propriedade "Display: Table-Cell" em contêiner "TD-DIV"

.TD-DIV
Exibição: Tabela de células;
Largura: 150px;
borda: #0f4bf0 sólido 1px;
margem: 5px;
preenchimento: 7px;

Acesse o terceiro div com a ajuda de “.TD-DIV”DOT seletivo e o respectivo ID, e aplique as propriedades CSS fornecidas abaixo:

• • O valor do “mostrar”A propriedade é definida como“célula de mesa”Que é utilizado para fabricar a célula e adicionar dados à célula.
  • ““largura”Especifica o tamanho da célula da tabela horizontalmente.
  • ““fronteira”Define um limite ao redor das células.
  • ““margem”Propriedade aloca o espaço fora da borda definida.
  • ““preenchimento”Especifica o espaço dentro do limite.

Saída

Por que usar "Display: Table-Cell" no CSS?

O "Exibição: Tabela de células”A propriedade CSS é usada para definir uma tela para dados que fazem o elemento se comportar como uma tabela. Portanto, os usuários podem criar uma duplicata de uma tabela em HTML sem utilizar o elemento da tabela 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 de célulasPropriedade CSS, crie contêineres de Div aninhados e insira uma classe em cada recipiente com um nome específico. Em seguida, acesse o contêiner Div no CSS e aplique a propriedade "Display: Table-Cell", onde o "mostrar”A propriedade é utilizada para definir os dados nas células da tabela. Este post demonstrou o método para utilizar a exibição: propriedade CSS de células de tabela.