Existuje viacero vlastností CSS na štýlovanie prvkov HTML. ' displej Jednou z nich je vlastnosť ”, ktorá sa používa na nastavenie prvku, ktorý je spravovaný ako vložený prvok alebo prvok bloku. Okrem toho rozloženie využívané pre svoje deti, ako je prietok, ohyb alebo mriežka. Okrem toho táto vlastnosť prideľuje vnútorné a vonkajšie typy na zobrazenie prvku.
Tento príspevok vysvetlí:
Ako používať „zobrazenie: bunka tabuľky“ v CSS?
Ak chcete použiť „ displej “vlastnosť s hodnotou” tabuľka-bunka “, vyskúšajte uvedené pokyny.
Krok 1: Vytvorte vnorené kontajnery div
Najprv vytvorte hlavný kontajner div pomocou „ Ak chcete získať prístup k hlavnému divu, použite „ #table-content ', kde ' # “ je selektor používaný na prístup k špecifikovanému „ id ” atribút kontajnera div. Potom použite nasledujúce vlastnosti: Krok 3: Štýl kontajnera „tr-div“. Teraz upravte štýl „ tr-div “nádoba takto: Výkon ' displej: tabuľka-bunka ” CSS vlastnosť sa používa na nastavenie zobrazenia údajov, vďaka ktorým sa prvok správa ako tabuľka. Používatelia tak môžu vytvoriť duplikát tabuľky v HTML bez použitia prvku tabuľky a iných prvkov, vrátane td a tr. Presnejšie, jeho vlastnosť definuje údaje vo forme tabuľky. Ak chcete použiť „ displej: tabuľka-bunka ” CSS, vytvorte vnorené kontajnery div a do každého kontajnera vložte triedu so špecifickým názvom. Potom prejdite ku kontajneru div v CSS a aplikujte vlastnosť „display: table-cell“, kde je „ displej Vlastnosť ” sa používa na nastavenie údajov v bunkách tabuľky. Tento príspevok demonštroval metódu na využitie vlastnosti CSS display:table-cell.
< div id = 'obsah tabuľky' >
< div trieda = 'tr-div' >
< div trieda = 'td-div' > Harry div >
< div trieda = 'td-div' > Html / CSS div >
div >
< div trieda = 'tr-div' >
< div trieda = 'td-div' > Edward div >
< div trieda = 'td-div' > Docker div >
div >
< div trieda = 'tr-div' >
< div trieda = 'td-div' > Jack div >
< div trieda = 'td-div' > Git div >
div >
div >
Dá sa všimnúť, že údaje boli úspešne pridané:
Krok 2: Vytvorte štýl kontajnera „obsah tabuľky“.
displej: tabuľka;
výplň: 7px;
}
Tu:
zobrazenie: riadok tabuľky;
farba pozadia: rgb ( 164 , 241 , 215 ) ;
výplň: 7px;
}
Podľa vyššie uvedeného bloku kódu „ displej “hodnota vlastnosti je nastavená ako “ riadok stola “, čo znamená, že údaje sú nastavené vo forme riadkov v tabuľke, “ farba pozadia “ vlastnosť sa používa na určenie farby na zadnej strane prvku a nakoniec, “ vypchávka ' sa aplikuje:
Krok 4: Použite vlastnosť „display: table-cell“ na kontajner „td-div“.
displej: tabuľka-bunka;
šírka: 150px;
hranica: #0f4bf0 plný 1px;
okraj: 5px;
výplň: 7px;
}
Prístup k tretiemu divu pomocou „ .td-div ” bodka selektívne a príslušné id a použite vlastnosti CSS uvedené nižšie:
Prečo používať „display: table-cell“ v CSS?
Záver