Hogyan és miért kell használni a „display: table-cell”-t a CSS-ben

Megfigyelhető, hogy az adatok hozzáadása sikeresen megtörtént:

2. lépés: Állítsa be a „tábla-tartalom” tároló stílusát

A fő div eléréséhez használja a „ #tábla-tartalom ', ahol ' # ' egy választó, amely a megadott ' id ” a div tároló attribútuma. Ezután alkalmazza a következő tulajdonságokat:

Itt:

• • A ' kijelző ” tulajdonság határozza meg és határozza meg, hogyan néz ki egy elem. Ehhez a tulajdonság értéke ' asztal ” az asztal elkészítéséhez.
  • ' párnázás ” osztja ki a helyet a konténeren belül.

3. lépés: Állítsa be a „tr-div” tárolót

Most alakítsa ki a „ tr-div ” konténer az alábbiak szerint:

A fenti kódblokk szerint a „ kijelző ' tulajdonság értéke '' asztal-sor ', ami azt jelenti, hogy az adatok táblázatban sorok formájában vannak beállítva, ' háttérszín ' tulajdonság az elem hátoldalán található szín megadására szolgál, és végül: ' párnázás ” kerül alkalmazásra:

4. lépés: Alkalmazza a „display: table-cell” tulajdonságot a „td-div” tárolón

A harmadik div elérése a következő segítségével .td-div ” pont szelektív és a megfelelő azonosítót, és alkalmazza az alább megadott CSS-tulajdonságokat:

• • A „ kijelző ' tulajdonság a következőre van állítva: ' tábla-cella ”, amelyet a cella létrehozására és a cellához való adatok hozzáadására használnak.
  • ' szélesség ” vízszintesen határozza meg a táblázat cellájának méretét.
  • ' határ ” határvonalat határoz meg a cellák körül.
  • ' árrés ” tulajdonság lefoglalja a meghatározott határon kívül eső teret.
  • ' párnázás ” a határon belüli teret adja meg.

Kimenet

Miért használja a „display: table-cell” kifejezést a CSS-ben?

A ' kijelző: táblázat-cella ” A CSS tulajdonságot arra használjuk, hogy a megjelenítést olyan adatokra állítsuk be, amelyek az elemet táblázatszerűen viselkedik. Így a felhasználók létrehozhatnak egy táblázat másolatát HTML-ben anélkül, hogy felhasználnák a táblázatelemet és más elemeket, beleértve a td-t és a tr-t. Pontosabban, a tulajdonsága táblázat formájában határozza meg az adatokat.

Következtetés

A „ kijelző: táblázat-cella ” CSS tulajdonság, hozzon létre beágyazott div tárolókat, és szúrjon be egy osztályt minden tárolóba meghatározott névvel. Ezután nyissa meg a div tárolót CSS-ben, és alkalmazza a „display: table-cell” tulajdonságot, ahol a „ kijelző ” tulajdonság a táblázatcellákban lévő adatok beállítására szolgál. Ez a bejegyzés bemutatta a display:table-cell CSS tulajdonság használatának módszerét.