Det er flere CSS-egenskaper for å style elementene i HTML. « vise ”-egenskapen er en av dem, som brukes til å sette elementet som administreres som et inline-element eller blokkelement. Videre har oppsettet brukt for barna sine, for eksempel flow, flex eller grid. Dessuten tildeler denne egenskapen de indre og ytre typene for å vise et element.
Dette innlegget vil forklare:
Hvordan bruke 'display: table-cell' i CSS?
For å bruke ' vise ' eiendom med verdien ' bordcelle ”, prøv ut de gitte instruksjonene.
Trinn 1: Lag Nested div-beholdere
Først oppretter du hoveddiv-beholderen ved hjelp av ' For å få tilgang til hoveddivisjonen, bruk ' #tabell-innhold ', hvor ' # ' er en velger som brukes for å få tilgang til den angitte ' id ”-attributtet til div-beholderen. Bruk deretter følgende egenskaper: Trinn 3: Stil 'tr-div'-beholder Stil nå ' tr-div ' beholder som følger: Produksjon « display: tabell-celle ” CSS-egenskapen brukes for å sette en visning til data som får elementet til å oppføre seg som en tabell. Så brukere kan lage et duplikat av en tabell i HTML uten å bruke tabellelementet og andre elementer, inkludert td og tr. Mer spesifikt definerer egenskapen hans dataene i form av en tabell. For å bruke ' display: tabell-celle ” CSS-egenskap, lag nestede div-beholdere og sett inn en klasse i hver beholder med et spesifikt navn. Gå deretter til div-beholderen i CSS, og bruk egenskapen 'display: table-cell', der ' vise ”-egenskapen brukes for å sette dataene i tabellcellene. Dette innlegget demonstrerte metoden for å bruke display:table-cell CSS-egenskapen.
< div id = 'tabell-innhold' >
< div klasse = 'tr-div' >
< div klasse = 'td-div' > Harry div >
< div klasse = 'td-div' > Html / CSS div >
div >
< div klasse = 'tr-div' >
< div klasse = 'td-div' > Edward div >
< div klasse = 'td-div' > Docker div >
div >
< div klasse = 'tr-div' >
< div klasse = 'td-div' > Jack div >
< div klasse = 'td-div' > Git div >
div >
div >
Det kan legges merke til at data har blitt lagt til:
Trinn 2: Stil 'bord-innhold'-beholder
display: tabell;
polstring: 7px;
}
Her:
display: tabell-rad;
bakgrunnsfarge: rgb ( 164 , 241 , 215 ) ;
polstring: 7px;
}
I henhold til kodeblokken ovenfor, ' vise ' egenskapsverdi er satt som ' bord-rad ' som betyr at data er satt i form av rader i en tabell, ' bakgrunnsfarge '-egenskapen brukes for å spesifisere fargen på baksiden av elementet, og til slutt, ' polstring ' blir brukt:
Trinn 4: Bruk egenskapen 'display: table-cell' på 'td-div'-beholderen
display: tabell-celle;
bredde: 150px;
grense: #0f4bf0 solid 1px;
margin: 5px;
polstring: 7px;
}
Få tilgang til den tredje div ved hjelp av ' .td-div ' punkt selektiv og den respektive IDen, og bruk CSS-egenskapene gitt nedenfor:
Hvorfor bruke 'display: table-cell' i CSS?
Konklusjon