Jak a proč používat „display: table-cell“ v CSS

Lze si všimnout, že data byla úspěšně přidána:

Krok 2: Vytvořte styl kontejneru „obsah tabulky“.

Pro přístup k hlavnímu divu použijte „ #table-content “, kde „ # “ je selektor používaný pro přístup k zadanému “ id ” atribut kontejneru div. Poté použijte následující vlastnosti:

Tady:

• • ' Zobrazit Vlastnost ” definuje a určuje, jak prvek vypadá. Za tímto účelem je hodnota této vlastnosti nastavena jako „ stůl “ za výrobu stolu.
  • “ vycpávka ” přiděluje prostor uvnitř kontejneru.

Krok 3: Vytvořte styl kontejneru „tr-div“.

Nyní stylizujte „ tr-div “ kontejner takto:

Podle výše uvedeného bloku kódu je „ Zobrazit “hodnota vlastnosti je nastavena jako “ tabulka-řádek “, což znamená, že data jsou nastavena ve formě řádků v tabulce, “ barva pozadí “ vlastnost se používá k určení barvy na zadní straně prvku a nakonec, “ vycpávka ' je použito:

Krok 4: Použijte vlastnost „display: table-cell“ na kontejner „td-div“.

Přístup ke třetímu divu pomocí „ .td-div ” dot selective a příslušné id a použijte vlastnosti CSS uvedené níže:

• • Hodnota „ Zobrazit “ vlastnost je nastavena jako “ tabulka-buňka ” který se používá k vytvoření buňky a přidání dat do buňky.
  • “ šířka ” určuje velikost buňky tabulky vodorovně.
  • “ okraj “ definuje hranici kolem buněk.
  • “ okraj ” vlastnost přiděluje prostor mimo definovanou hranici.
  • “ vycpávka ” určuje prostor uvnitř hranice.

Výstup

Proč používat „display: table-cell“ v CSS?

' displej: tabulka-buňka ” CSS vlastnost se používá k nastavení zobrazení na data, díky nimž se prvek chová jako tabulka. Uživatelé tedy mohou vytvořit duplikát tabulky v HTML bez použití prvku tabulky a dalších prvků, včetně td a tr. Přesněji řečeno, jeho vlastnost definuje data ve formě tabulky.

Závěr

Chcete-li použít „ displej: tabulka-buňka ” CSS, vytvořte vnořené kontejnery div a vložte do každého kontejneru třídu se specifickým názvem. Poté otevřete kontejner div v CSS a použijte vlastnost „display: table-cell“, kde je „ Zobrazit Vlastnost ” se používá pro nastavení dat v buňkách tabulky. Tento příspěvek demonstroval metodu pro využití vlastnosti CSS display:table-cell.