Postoji više CSS svojstava za oblikovanje elemenata HTML-a. ' prikaz ” Svojstvo je jedno od njih, koje se koristi za postavljanje elementa kojim se upravlja kao elementom u liniji ili blok elementom. Nadalje, raspored koji se koristi za svoju djecu, kao što su flow, flex ili grid. Štoviše, ovo svojstvo dodjeljuje unutarnje i vanjske vrste za prikaz elementa.
Ovaj će post objasniti:
Kako koristiti “display: table-cell” u CSS-u?
Za korištenje ' prikaz ' svojstvo s vrijednošću ' tablica-ćelija “, isprobajte dane upute.
Korak 1: Napravite ugniježđene div kontejnere
Najprije izradite glavni div spremnik uz pomoć ' Za pristup glavnom divu upotrijebite ' #sadržaj tablice ', gdje ' # ” je selektor koji se koristi za pristup navedenom „ iskaznica ” atribut div spremnika. Zatim primijenite sljedeća svojstva: Korak 3: Stilizirajte spremnik 'tr-div'. Sada stilizirajte ' tr-div ” kontejner kako slijedi: Izlaz ' prikaz: tablica-ćelija ” CSS svojstvo koristi se za postavljanje prikaza podataka koji čine da se element ponaša kao tablica. Dakle, korisnici mogu stvoriti duplikat tablice u HTML-u bez korištenja elementa table i drugih elemenata, uključujući td i tr. Konkretnije, njegovo svojstvo definira podatke u obliku tablice. Za korištenje ' prikaz: tablica-ćelija ” CSS svojstvo, stvorite ugniježđene div spremnike i umetnite klasu u svaki spremnik s određenim nazivom. Zatim pristupite div spremniku u CSS-u i primijenite svojstvo 'display: table-cell', gdje ' prikaz ” Svojstvo se koristi za postavljanje podataka u ćelije tablice. Ovaj post demonstrira metodu za korištenje CSS svojstva display:table-cell.
< div iskaznica = 'sadržaj tablice' >
< div razreda = 'tr-div' >
< div razreda = 'td-div' > Harry div >
< div razreda = 'td-div' > Html / CSS div >
div >
< div razreda = 'tr-div' >
< div razreda = 'td-div' > Edvard div >
< div razreda = 'td-div' > Lučki radnik div >
div >
< div razreda = 'tr-div' >
< div razreda = 'td-div' > Utičnica div >
< div razreda = 'td-div' > Git div >
div >
div >
Može se primijetiti da su podaci uspješno dodani:
Korak 2: Stilizirajte spremnik 'table-content'.
prikaz: stol;
ispuna: 7px;
}
Ovdje:
prikaz: tablica-redak;
boja pozadine: rgb ( 164 , 241 , 215 ) ;
ispuna: 7px;
}
Prema gornjem bloku koda, ' prikaz ” vrijednost svojstva postavljena je kao “ tablica-red ” što znači da su podaci postavljeni u obliku redaka u tablici, “ boja pozadine ” svojstvo se koristi za određivanje boje na stražnjoj strani elementa, i na kraju, “ podstava ' je primijenjen:
Korak 4: Primijenite svojstvo 'display: table-cell' na 'td-div' spremnik
prikaz: tablica-ćelija;
širina: 150px;
granica: #0f4bf0 čvrsti 1px;
margina: 5px;
ispuna: 7px;
}
Pristupite trećem divu uz pomoć ' .td-div ” selektivna točka i odgovarajući ID, te primijenite CSS svojstva navedena u nastavku:
Zašto koristiti “display: table-cell” u CSS-u?
Zaključak