HTML elementu veidošanai ir vairāki CSS rekvizīti. ' displejs ” rekvizīts ir viens no tiem, kas tiek izmantots, lai iestatītu elementu, kas tiek pārvaldīts kā iekļauts elements vai bloka elements. Turklāt bērniem izmantotais izkārtojums, piemēram, plūsma, flex vai režģis. Turklāt šis rekvizīts piešķir iekšējo un ārējo veidu elementa parādīšanai.
Šajā rakstā tiks paskaidrots:
Kā CSS lietotnē “displejs: tabulas šūna”?
Lai izmantotu ' displejs 'īpašums ar vērtību' galda šūna ”, izmēģiniet sniegtos norādījumus.
1. darbība. Izveidojiet ligzdotas div konteinerus
Vispirms izveidojiet galveno div konteineru, izmantojot ' Lai piekļūtu galvenajam div, izmantojiet ' #tabula-saturs ', kur ' # ” ir atlasītājs, ko izmanto, lai piekļūtu norādītajam id ” div konteinera atribūts. Pēc tam izmantojiet šādas īpašības: 3. darbība. Veidojiet konteineru “tr-div”. Tagad izveidojiet stilu “ tr-div ” konteiners šādi: Izvade ' displejs: tabula-šūna ” CSS rekvizīts tiek izmantots, lai iestatītu displeju datiem, kas liek elementam darboties kā tabulai. Tādējādi lietotāji var izveidot tabulas dublikātu HTML, neizmantojot tabulas elementu un citus elementus, tostarp td un tr. Precīzāk, viņa īpašums definē datus tabulas veidā. Lai izmantotu ' displejs: tabula-šūna ” CSS rekvizītu, izveidojiet ligzdotos div konteinerus un ievietojiet katrā konteinerā klasi ar noteiktu nosaukumu. Pēc tam piekļūstiet div konteineram CSS un lietojiet rekvizītu “displejs: tabulas šūna”, kur “ displejs ” rekvizīts tiek izmantots datu iestatīšanai tabulas šūnās. Šajā ziņojumā tika parādīta metode displeja: tabulas šūnu CSS rekvizīta izmantošanai.
< div id = 'tabulas saturs' >
< div klasē = 'tr-div' >
< div klasē = 'td-div' > Harijs div >
< div klasē = 'td-div' > HTML / CSS div >
div >
< div klasē = 'tr-div' >
< div klasē = 'td-div' > Edvards div >
< div klasē = 'td-div' > Docker div >
div >
< div klasē = 'tr-div' >
< div klasē = 'td-div' > Džeks div >
< div klasē = 'td-div' > Git div >
div >
div >
Var pamanīt, ka dati ir veiksmīgi pievienoti:
2. darbība. Veidojiet konteinera “tabulas saturu” stilu
displejs: galds;
polsterējums: 7px;
}
Šeit:
displejs: tabula-rinda;
fona krāsa: rgb ( 164 , 241 , 215 ) ;
polsterējums: 7px;
}
Saskaņā ar iepriekš minēto koda bloku “ displejs 'īpašuma vērtība ir iestatīta kā ' tabula-rinda ', kas nozīmē, ka dati tabulā ir iestatīti rindu veidā, ' fona krāsa Īpašums tiek izmantots, lai norādītu krāsu elementa aizmugurē, un visbeidzot, ' polsterējums ” tiek piemērots:
4. darbība. Lietojiet rekvizītu “display: table-cell” konteinerā “td-div”
displejs: tabula-šūna;
platums: 150 pikseļi;
robeža: #0f4bf0 ciets 1px;
mala: 5 pikseļi;
polsterējums: 7px;
}
Piekļūstiet trešajam div, izmantojot ' .td-div ” punktu selektīvs un atbilstošs ID, un izmantojiet tālāk norādītos CSS rekvizītus:
Kāpēc izmantot CSS “displejs: tabulas šūna”?
Secinājums