Istnieje wiele właściwości CSS służących do stylizowania elementów HTML. „ wyświetlacz ” jest jedną z nich, która służy do ustawienia elementu, który jest zarządzany jako element liniowy lub element blokowy. Ponadto układ używany dla jego dzieci, taki jak przepływ, flex lub siatka. Co więcej, ta właściwość przydziela typy wewnętrzne i zewnętrzne do wyświetlania elementu.
Ten post wyjaśni:
Jak korzystać z „display: table-cell” w CSS?
Aby skorzystać z opcji „ wyświetlacz „właściwość o wartości” komórka stołowa ”, wypróbuj podane instrukcje.
Krok 1: Utwórz zagnieżdżone kontenery div
Najpierw utwórz główny kontener div za pomocą „
< dz ID = „zawartość tabeli” >
< dz klasa = „tr-div” >
< dz klasa = 'td-div' > Złupić dz >
< dz klasa = 'td-div' > HTML / CSS dz >
dz >
< dz klasa = „tr-div” >
< dz klasa = 'td-div' > Edwarda dz >
< dz klasa = 'td-div' > Doker dz >
dz >
< dz klasa = „tr-div” >
< dz klasa = 'td-div' > Jacek dz >
< dz klasa = 'td-div' > Git dz >
dz >
dz >
Można zauważyć, że dane zostały pomyślnie dodane:
Krok 2: Stylizuj kontener „table-content”.
Aby uzyskać dostęp do głównego elementu div, użyj „ #zawartość tabeli ', Gdzie ' # ” to selektor używany do uzyskiwania dostępu do określonego „ ID ” atrybut kontenera div. Następnie zastosuj następujące właściwości:
#zawartość tabeli{wyświetlacz: stolik;
wypełnienie: 7px;
}
Tutaj:
-
- „ wyświetlacz ” definiuje i określa wygląd elementu. Aby to zrobić, wartość tej właściwości jest ustawiana jako „ tabela ” za zrobienie stołu.
- “ wyściółka ” przydziela przestrzeń wewnątrz kontenera.
Krok 3: Stylizuj kontener „tr-div”.
Teraz stylizuj „ tr-dział ” pojemnik w następujący sposób:
.tr-div {wyświetlacz: rząd tabeli;
kolor tła: rgb ( 164 , 241 , 215 ) ;
wypełnienie: 7px;
}
Zgodnie z powyższym blokiem kodu, „ wyświetlacz ” wartość właściwości jest ustawiona jako „ rząd tabeli ”, co oznacza, że dane są ustawione w postaci wierszy w tabeli, „ kolor tła ” służy do określania koloru tylnej strony elementu, a na koniec „ wyściółka ” stosuje się:
Krok 4: Zastosuj właściwość „display: table-cell” w kontenerze „td-div”.
wyświetlacz: komórka stołowa;
szerokość: 150 pikseli;
granica: #0f4bf0 stałe 1px;
margines: 5px;
wypełnienie: 7px;
}
Uzyskaj dostęp do trzeciego elementu div za pomocą „ .td-div ” kropka selektywna i odpowiedni identyfikator, a następnie zastosuj właściwości CSS podane poniżej:
-
- Wartość „ wyświetlacz ” właściwość jest ustawiona jako „ komórka stołowa ”, który służy do tworzenia komórki i dodawania danych do komórki.
- “ szerokość ” określa rozmiar komórki tabeli w poziomie.
- “ granica ” określa granicę wokół komórek.
- “ margines ” przydziela przestrzeń poza określoną granicą.
- “ wyściółka ” określa przestrzeń wewnątrz granicy.
Wyjście
Dlaczego warto używać „display: table-cell” w CSS?
„ wyświetlacz: komórka tabeli Właściwość CSS służy do ustawienia wyświetlania danych, dzięki czemu element zachowuje się jak tabela. Tak więc użytkownicy mogą tworzyć duplikaty tabeli w HTML bez użycia elementu tabeli i innych elementów, w tym td i tr. Mówiąc dokładniej, jego właściwość definiuje dane w postaci tabeli.
Wniosek
Aby skorzystać z opcji „ wyświetlacz: komórka tabeli ” CSS, utwórz zagnieżdżone kontenery div i umieść w każdym kontenerze klasę o określonej nazwie. Następnie uzyskaj dostęp do kontenera div w CSS i zastosuj właściwość „display: table-cell”, gdzie „ wyświetlacz ” służy do ustawiania danych w komórkach tabeli. Ten post zademonstrował metodę wykorzystania właściwości CSS display:table-cell.