Kuidas ja miks kasutada CSS-is 'display: table-cell'.

Kuidas Ja Miks Kasutada Css Is Display Table Cell



HTML-i elementide stiili kujundamiseks on mitu CSS-i atribuuti. ' kuva ” atribuut on üks neist, mida kasutatakse sise- või plokielemendina hallatava elemendi seadistamiseks. Lisaks kasutatakse selle lastele mõeldud paigutust, nagu vool, paindumine või võrk. Veelgi enam, see atribuut määrab elemendi kuvamiseks sisemise ja välimise tüübi.

See postitus selgitab:





Kuidas kasutada CSS-is 'display: table-cell'?

Et kasutada ' kuva ' vara väärtusega ' tabel-lahter ”, proovige antud juhiseid.



1. toiming: looge pesastatud div konteinerid



Esmalt looge põhidiv konteiner, kasutades '

' silt ja sisestage ' id ” atribuut div sildi sees. Seejärel lisage märgendi div vahele veel konteinereid ja lisage ' klass ” atribuut igas divis:



< div id = 'tabeli sisu' >
< div klass = 'tr-div' >
< div klass = 'td-div' > Harry div >
< div klass = 'td-div' > HTML / CSS div >
div >
< div klass = 'tr-div' >
< div klass = 'td-div' > Edward div >
< div klass = 'td-div' > Docker div >
div >
< div klass = 'tr-div' >
< div klass = 'td-div' > Jack div >
< div klass = 'td-div' > Git div >
div >
div >


On märgata, et andmete lisamine õnnestus:


2. samm: muutke konteineri stiiliks 'tabeli sisu'.



Põhidivisjoni avamiseks kasutage nuppu ' #tabelisisu ', kus ' # ' on valija, mida kasutatakse määratud ' id ” div konteineri atribuut. Seejärel rakendage järgmisi omadusi:

#tabeli sisu{
väljapanek: laud;
polster: 7px;
}


Siin:

    • ' kuva ” atribuut määrab ja määrab, kuidas element välja näeb. Selleks määratakse selle atribuudi väärtuseks ' laud ” laua valmistamise eest.
    • “ polsterdus ” eraldab konteineri sees ruumi.

3. samm: muutke konteineri stiiliks „tr-div”.

Nüüd kujundage ' tr-div ” konteiner järgmiselt:

.tr-div {
kuva: tabel-rida;
taustavärv: rgb ( 164 , 241 , 215 ) ;
polster: 7px;
}


Ülaltoodud koodiploki kohaselt on ' kuva ' vara väärtuseks on määratud ' laud-rida ', mis tähendab, et andmed on seatud tabelis ridade kujul, ' taustavärv ' atribuuti kasutatakse elemendi tagakülje värvi määramiseks ja lõpuks ' polsterdus ” rakendatakse:


4. toiming: rakendage konteinerile „td-div” atribuuti „display: table-cell”

.td-div {
ekraan: tabel-lahter;
laius: 150 pikslit;
piir: #0f4bf0 tahke 1px;
veeris: 5 pikslit;
polster: 7px;
}


Juurdepääs kolmandale osale ' .td-div ” punkt valikuline ja vastav ID ning rakendage allpool toodud CSS-i atribuute:

    • ' kuva ' atribuut on määratud kui ' tabel-lahter ”, mida kasutatakse lahtri tegemiseks ja lahtrisse andmete lisamiseks.
    • “ laius ” määrab tabeli lahtri suuruse horisontaalselt.
    • “ piir ” määrab lahtrite ümber piiri.
    • “ marginaal ” atribuut eraldab ruumi väljaspool määratletud piiri.
    • “ polsterdus ” määrab ruumi piiri sees.

Väljund

Miks kasutada CSS-is 'display: table-cell'?

' kuva: tabel-lahter ” CSS-i atribuuti kasutatakse kuva seadistamiseks andmetele, mis panevad elemendi käituma nagu tabel. Seega saavad kasutajad luua HTML-is tabeli duplikaadi ilma tabelielementi ja muid elemente, sealhulgas td ja tr, kasutamata. Täpsemalt määratleb tema omadus andmed tabeli kujul.

Järeldus

Et kasutada ' kuva: tabel-lahter ” CSS-i atribuut, looge pesastatud div-konteinerid ja sisestage igasse konteinerisse klass konkreetse nimega. Seejärel avage CSS-is div-konteiner ja rakendage atribuuti „display: table-cell”, kus „ kuva ” atribuuti kasutatakse tabeli lahtrite andmete määramiseks. See postitus demonstreeris atribuudi display:table-cell CSS kasutamise meetodit.

muud

Kategooria

Lemmik Postitused

Kuidas MATLABis teksti väljastada

'Võrguühenduse jaoks vajalikud Windowsi pistikupesade registrikirjed puuduvad'

Looge ESP32 ja Arduino IDE abil juhuslikke numbreid

Kuidas kasutada Java klassi Enum meetodit valueOf().

Kuidas teha Minecraftis punast värvi

Seadistage Filebeat Windowsis - Elasticsearch

Mis on Oracle Cerneri eesmärk?

Revolt – avatud lähtekoodiga alternatiiv discordile

Goto avalduse kasutamine Arduinos

Kuidas CSS-i abil horisontaalselt ja vertikaalselt joondada?

5 parimat Androidi kõnepostirakendust 2022. aastal

Kuidas kasutada OpenAI ChatGPT-d?

MVN-i sõltuvuspuu

Installige Docker versioonile Ubuntu 24.04

Kuidas muusikat oma Android-telefoni alla laadida?

Kuidas kasutada kirjelduste loendit HTML-is?

Kuidas muuta saladusi AWS-i salahalduriga, kasutades AWS-i konsooli?

Kuidas kasutada strncpy() funktsiooni C++-s

Elasticsearch Multi-Get

TypeError: object.forEach ei ole JavaScriptis funktsioon