Yra keletas CSS ypatybių, skirtų HTML elementų stiliui formuoti. „ ekranas “ ypatybė yra viena iš jų, kuri naudojama nustatant elementą, kuris tvarkomas kaip eilutinis elementas arba bloko elementas. Be to, vaikams naudojamas išdėstymas, pvz., srautas, lankstumas arba tinklelis. Be to, ši savybė priskiria vidinį ir išorinį elementus elementui rodyti.
Šis įrašas paaiškins:
Kaip naudoti „display: table-cell“ CSS?
Norėdami naudoti ' ekranas „turtas, kurio vertė“ stalo langelis “, išbandykite pateiktas instrukcijas.
1 veiksmas: sukurkite sudėtinius „div“ konteinerius
Pirmiausia sukurkite pagrindinį div konteinerį naudodami „ Norėdami pasiekti pagrindinį skyrių, naudokite „ #lentelės-turinys “, kur „ # “ yra parinkiklis, naudojamas norint pasiekti nurodytą “ id “ div konteinerio atributas. Tada pritaikykite šias savybes: 3 veiksmas: sukurkite „tr-div“ konteinerį Dabar sukurkite stilių „ tr-div “ konteinerį taip: Išvestis „ ekranas: lentelės langelis ” CSS ypatybė naudojama nustatant rodymą duomenims, dėl kurių elementas elgiasi kaip lentelė. Taigi vartotojai gali sukurti lentelės kopiją HTML nenaudodami lentelės elemento ir kitų elementų, įskaitant td ir tr. Tiksliau, jo savybė apibrėžia duomenis lentelės pavidalu. Norėdami naudoti ' ekranas: lentelės langelis ” CSS ypatybę, sukurkite įdėtus div konteinerius ir į kiekvieną konteinerį įterpkite klasę konkrečiu pavadinimu. Tada pasiekite div konteinerį CSS ir pritaikykite ypatybę „display: table-cell“, kur „ ekranas ypatybė naudojama nustatant duomenis lentelės langeliuose. Šis įrašas parodė, kaip naudoti Display:table-cell CSS ypatybę.
< div id = 'lentelės turinys' >
< div klasė = 'tr-div' >
< div klasė = 'td-div' > Hari div >
< div klasė = 'td-div' > HTML / CSS div >
div >
< div klasė = 'tr-div' >
< div klasė = 'td-div' > Edvardas div >
< div klasė = 'td-div' > Dokeris div >
div >
< div klasė = 'tr-div' >
< div klasė = 'td-div' > Domkratas div >
< div klasė = 'td-div' > Git div >
div >
div >
Galima pastebėti, kad duomenys sėkmingai pridėti:
2 veiksmas: sukurkite „lentelės turinio“ sudėtinį rodinį
ekranas: stalas;
pamušalas: 7px;
}
Čia:
ekranas: lentelė-eilutė;
fono spalva: rgb ( 164 , 241 , 215 ) ;
pamušalas: 7px;
}
Pagal aukščiau pateiktą kodo bloką „ ekranas “ nuosavybės vertė nustatyta kaip “ lentelė-eilė “, tai reiškia, kad duomenys pateikiami lentelės eilučių pavidalu, “ fono spalva ypatybė naudojama norint nurodyti spalvą elemento gale, ir galiausiai ' kamšalas “ taikomas:
4 veiksmas: „td-div“ sudėtiniame rodinyje pritaikykite ypatybę „display: table-cell“
ekranas: lentelės langelis;
plotis: 150 pikselių;
kraštinė: #0f4bf0 vientisas 1px;
paraštė: 5 pikseliai;
pamušalas: 7px;
}
Pasiekite trečiąjį skyrelį naudodami „ .td-div “ tašką ir atitinkamą ID, ir pritaikykite toliau pateiktas CSS ypatybes:
Kodėl CSS naudoti „display: table-cell“?
Išvada