Hvordan og hvorfor bruke “Display Table-Cell” i CSS

Det er flere CSS -egenskaper for å style elementene i HTML. “vise”Eiendom er en av dem, som brukes til å sette elementet som administreres som et inline element eller blokkelement. Videre brukes oppsettet for sine barn, for eksempel flyt, flex eller rutenett. Dessuten tildeler denne egenskapen de indre og ytre typene for å vise et element.

Dette innlegget vil forklare:

• • Hvordan bruke “Display: Table-Cell” i CSS?
  • Hvorfor bruke “Display: Table-Cell” i CSS?

Hvordan bruke “Display: Table-Cell” i CSS?

Å bruke “vise”Eiendom med verdien”Bordcelle”, Prøv ut de gitte instruksjonene.

Trinn 1: Lag nestede divcontainere

Først må du lage hoveddivcontaineren ved hjelp av "”Tag og sett inn“id”Attributt inne i Div -taggen. Deretter, i mellom div -taggen, legger du til flere containere og legger til en "klasse”Attributt i hver div:

Herry

Det kan legges merke til at data er lagt til vellykket:

Trinn 2: Stil “Tabellinnhold” -beholder

For å få tilgang til hoveddiven, bruk "#TABELL-CONTENT", hvor "#”Er en velger som brukes til å få tilgang til den spesifiserte“id”Attributt av Div Container. Bruk deretter følgende egenskaper:

#tabellinnhold
Display: tabell;
polstring: 7px;

Her:

• • “vise”Eiendom definerer og bestemmer hvordan et element ser ut. For å gjøre det settes verdien av denne egenskapen som "bord”For å lage bordet.
  • “polstring”Tildeler plassen inne i beholderen.

Trinn 3: Stil “TR-DIV” -beholder

Nå, stil "tr-div”Container som følger:

.tr-div
Display: tabell-rad;
bakgrunnsfarge: RGB (164, 241, 215);
polstring: 7px;

I følge kodeblokken ovenfor, "vise”Eiendomsverdien er satt som“Tabell-rad”Som betyr at data er satt i form av rader i en tabell,”bakgrunnsfarge”Eiendom brukes til å spesifisere fargen på baksiden av elementet, og til slutt,”polstring" blir brukt:

Trinn 4: Bruk "Display: Table-Cell" -egenskaper på "TD-DIV" -beholderen

.td-div
Display: bordcelle;
Bredde: 150px;
Border: #0F4BF0 Solid 1px;
Margin: 5px;
polstring: 7px;

Få tilgang til den tredje div ved hjelp av ".td-div”Dot selektiv og den respektive ID -en, og bruk CSS -egenskapene gitt nedenfor:

• • Verdien av “vise”Eiendom er satt som“Bordcelle”Som brukes til å lage cellen og legge til data i cellen.
  • “bredde”Angir størrelsen på tabellcellen horisontalt.
  • “grense”Definerer en grense rundt cellene.
  • “margin”Eiendom tildeler plassen utenfor den definerte grensen.
  • “polstring”Angir plassen inne i grensen.

Produksjon

Hvorfor bruke “Display: Table-Cell” i CSS?

“Display: Tabellcelle”CSS -egenskap brukes til å sette en skjerm til data som gjør at elementet oppfører seg som en tabell. Så brukere kan opprette en duplikat av en tabell i HTML uten å bruke tabellelementet og andre elementer, inkludert TD og TR. Mer spesifikt definerer eiendommen hans dataene i form av en tabell.

Konklusjon

Å bruke “Display: Tabellcelle”CSS -eiendom, lag nestede div containere og sett inn en klasse i hver beholder med et spesifikt navn. Deretter får du tilgang til DIV-beholderen i CSS, og bruk egenskapen "Display: Table-Cell", der "vise”Eiendom brukes til å stille inn dataene i tabellcellene. Dette innlegget demonstrerte metoden for å bruke displayet: Tabell-celle CSS-egenskap.