Hvordan og hvorfor bruges 'display: table-cell' i CSS

Det kan bemærkes, at data er blevet tilføjet med succes:

Trin 2: Stil 'table-content'-beholder

For at få adgang til hoved-div, skal du bruge ' #tabel-indhold ', hvor ' # ' er en vælger, der bruges til at få adgang til den angivne ' id ”-attribut for div-beholderen. Anvend derefter følgende egenskaber:

Her:

• • Det ' Skærm ” egenskab definerer og bestemmer hvordan et element ser ud. For at gøre det, er værdien af ​​denne egenskab sat som ' bord ” for at lave bordet.
  • “ polstring ” tildeler pladsen inde i containeren.

Trin 3: Stil 'tr-div'-beholder

Stil nu ' tr-div ' beholder som følger:

I henhold til ovenstående kodeblok er ' Skærm ' egenskabsværdi er sat som ' bordrække ', hvilket betyder, at data er sat i form af rækker i en tabel, ' baggrundsfarve egenskaben bruges til at angive farven på bagsiden af ​​elementet, og til sidst, ' polstring ' anvendes:

Trin 4: Anvend egenskaben 'display: table-cell' på 'td-div'-beholderen

Få adgang til den tredje div ved hjælp af ' .td-div ” prik selektiv og det respektive id, og anvend CSS-egenskaberne nedenfor:

• • Værdien af ​​' Skærm ' egenskab er indstillet som ' tabel-celle ” som bruges til at lave cellen og tilføje data til cellen.
  • “ bredde ” angiver størrelsen af ​​tabelcellen vandret.
  • “ grænse ” definerer en grænse omkring cellerne.
  • “ margen ” egenskaben allokerer pladsen uden for den definerede grænse.
  • “ polstring ” angiver rummet inden for grænsen.

Produktion

Hvorfor bruge 'display: table-cell' i CSS?

Det ' display: tabel-celle ” CSS-egenskaben bruges til at indstille en visning til data, der får elementet til at opføre sig som en tabel. Så brugere kan oprette en dublet af en tabel i HTML uden at bruge tabelelementet og andre elementer, inklusive td og tr. Mere specifikt definerer hans egenskab dataene i form af en tabel.

Konklusion

For at bruge ' display: tabel-celle ” CSS-egenskab, opret indlejrede div-containere og indsæt en klasse i hver container med et specifikt navn. Gå derefter til div-beholderen i CSS, og anvend egenskaben 'display: table-cell', hvor ' Skærm egenskaben bruges til at indstille dataene i tabelcellerne. Dette indlæg demonstrerede metoden til at bruge display:table-cell CSS-egenskaben.