Hoe en waarom 'display: table-cell' gebruiken in CSS

U kunt zien dat de gegevens succesvol zijn toegevoegd:

Stap 2: Stijl 'table-content' Container

Gebruik de ' #tafelinhoud ', waar ' # ” is een selector die wordt gebruikt voor toegang tot de gespecificeerde “ ID kaart ” attribuut van de div-container. Pas vervolgens de volgende eigenschappen toe:

Hier:

• • De ' weergave ” eigenschap definieert en bepaalt hoe een element eruitziet. Om dit te doen, wordt de waarde van deze eigenschap ingesteld als ' tafel ” voor het maken van de tafel.
  • “ opvulling ” wijst de ruimte in de container toe.

Stap 3: Stijl 'tr-div' Container

Style nu de ' tr-div 'container als volgt:

Volgens het bovenstaande codeblok is de ' weergave ” eigendomswaarde is ingesteld als “ tafel rij ' wat betekent dat gegevens worden ingesteld in de vorm van rijen in een tabel, ' Achtergrond kleur ” eigendom wordt gebruikt voor het specificeren van de kleur aan de achterkant van het element, en tot slot, “ opvulling ' is toegepast:

Stap 4: Pas de eigenschap 'display: table-cell' toe op de container 'td-div'.

Toegang tot de derde div met behulp van ' .td-div ” dot selectief en de respectieve id, en pas de onderstaande CSS-eigenschappen toe:

• • De waarde van de “ weergave ” eigendom is ingesteld als “ tafel-cel 'die wordt gebruikt voor het maken van de cel en het toevoegen van gegevens aan de cel.
  • “ breedte ” specificeert de grootte van de tabelcel horizontaal.
  • “ grens ” definieert een grens rond de cellen.
  • “ marge ” eigenschap wijst de ruimte toe buiten de gedefinieerde grens.
  • “ opvulling ” specificeert de ruimte binnen de grens.

Uitgang

Waarom 'display: table-cell' gebruiken in CSS?

De ' weergave: tabelcel ” CSS-eigenschap wordt gebruikt voor het instellen van een weergave op gegevens waardoor het element zich als een tabel gedraagt. Gebruikers kunnen dus een duplicaat van een tabel in HTML maken zonder gebruik te maken van het tabelelement en andere elementen, waaronder td en tr. Meer specifiek definieert zijn eigenschap de gegevens in de vorm van een tabel.

Conclusie

Om de ' weergave: tabelcel ” CSS-eigenschap, maak geneste div-containers en voeg een klasse in elke container in met een specifieke naam. Open vervolgens de div-container in CSS en pas de eigenschap 'display: table-cell' toe, waarbij de ' weergave ” eigenschap wordt gebruikt voor het instellen van de gegevens in de tabelcellen. Dit bericht demonstreerde de methode voor het gebruik van de CSS-eigenschap display:table-cell.