Come e perché usare 'display: table-cell' nei CSS

Si può notare che i dati sono stati aggiunti con successo:

Passaggio 2: stile contenitore 'contenuto tabella'.

Per accedere al div principale, utilizzare il ' #table-content ', Dove ' # ” è un selettore utilizzato per accedere al “ id ” attributo del contenitore div. Quindi, applica le seguenti proprietà:

Qui:

• • IL ' Schermo ” definisce e determina l'aspetto di un elemento. Per fare ciò, il valore di questa proprietà è impostato come ' tavolo ” per fare la tavola.
  • “ imbottitura ” alloca lo spazio all'interno del contenitore.

Passaggio 3: stile contenitore 'tr-div'.

Ora, stile il ' tr-div ” contenitore come segue:

Secondo il blocco di codice sopra, il ' Schermo ” il valore della proprietà è impostato come “ riga del tavolo ” che significa che i dati sono impostati sotto forma di righe in una tabella, “ colore di sfondo La proprietà ' viene utilizzata per specificare il colore sul retro dell'elemento e, infine, ' imbottitura ' viene applicata:

Passaggio 4: applicare la proprietà 'display: table-cell' al contenitore 'td-div'.

Accedi al terzo div con l'aiuto di ' .td-div ” punto selettivo e il rispettivo id, e applicare le proprietà CSS indicate di seguito:

• • Il valore del “ Schermo La proprietà 'è impostata come' cella di tabella ” che viene utilizzato per creare la cella e aggiungere dati alla cella.
  • “ larghezza ” specifica la dimensione della cella della tabella orizzontalmente.
  • “ confine ” definisce un confine attorno alle celle.
  • “ margine La proprietà ” alloca lo spazio al di fuori del bordo definito.
  • “ imbottitura ” specifica lo spazio all'interno del contorno.

Produzione

Perché usare 'display: table-cell' in CSS?

IL ' display: cella di tabella La proprietà CSS viene utilizzata per impostare una visualizzazione sui dati che fa sì che l'elemento si comporti come una tabella. Pertanto, gli utenti possono creare un duplicato di una tabella in HTML senza utilizzare l'elemento table e altri elementi, inclusi td e tr. Più specificamente, la sua proprietà definisce i dati sotto forma di tabella.

Conclusione

Per utilizzare il ' display: cella di tabella ” Proprietà CSS, creare contenitori div nidificati e inserire una classe in ogni contenitore con un nome specifico. Quindi, accedi al contenitore div in CSS e applica la proprietà 'display: table-cell', dove ' Schermo La proprietà ” viene utilizzata per impostare i dati nelle celle della tabella. Questo post ha dimostrato il metodo per utilizzare la proprietà CSS display:table-cell.