Jak i dlaczego używać „wyświetlania komórek tabeli” w CSS

Istnieje wiele właściwości CSS do stylizacji elementów HTML. „„wyświetlacz„Własność jest jedną z nich, która jest wykorzystywana do ustawiania elementu zarządzanego jako element wbudowany lub element blokowy. Ponadto układ wykorzystywany dla swoich dzieci, takich jak przepływ, flex lub siatka. Ponadto ta właściwość przydziela typy wewnętrzne i zewnętrzne, aby wyświetlić element.

Ten post wyjaśni:

• • Jak używać „Display: Table Cell” w CSS?
  • Dlaczego warto używać „Wyświetl: komórek stołowy” w CSS?

Jak używać „Display: Table Cell” w CSS?

Używać „wyświetlacz„Własność o wartości”Komórka stołowa”, Wypróbuj podane instrukcje.

Krok 1: Zrób zagnieżdżone pojemniki Div

Najpierw stwórz główny kontener DIV za pomocą „”Tag i wstaw„ „ID”Atrybut wewnątrz znacznika div. Następnie, pomiędzy znacznikiem DIV, dodaj więcej kontenerów i dodaj „klasa„Atrybut w każdym div:

Herry

Można zauważyć, że dane zostały pomyślnie dodane:

Krok 2: Pojemnik stylowy „stolik”

Aby uzyskać dostęp do głównej div, skorzystaj z „#Contrent", Gdzie "#”To selektor używany do dostępu do określonych„ID„Atrybut kontenera Div. Następnie zastosuj następujące właściwości:

#Table-Content
Wyświetl: Tabela;
Wyściółka: 7px;

Tutaj:

• • „„wyświetlacz”Właściwość określa i określa, jak wygląda element. Aby to zrobić, wartość tej właściwości jest ustalana jako „tabela„Za tworzenie stołu.
  • "wyściółka„Przydziela przestrzeń wewnątrz pojemnika.

Krok 3: Style pojemnik „TR-DIV”

Teraz stygnij „TR-DIV„Pojemnik w następujący sposób:

.TR-DIV
Wyświetlacz: Table-Row;
kolor tła: RGB (164, 241, 215);
Wyściółka: 7px;

Zgodnie z powyższym blokiem „The”, „wyświetlacz„Wartość właściwości jest ustalana jako„Row stołowy”Co oznacza, że ​​dane są ustawiane w postaci wierszy w tabeli,„kolor tła„Własność jest wykorzystywana do określenia koloru na tylnej części elementu, a na koniec„ ”wyściółka”Zastosowano:

Krok 4: Zastosuj właściwość „Wyświetl: komórek stołowy” na pojemniku „TD-DIV”

.TD-DIV
Wyświetlacz: komórek stołowy;
szerokość: 150px;
granica: #0f4bf0 solid 1px;
Margines: 5px;
Wyściółka: 7px;

Uzyskaj dostęp do trzeciego div za pomocą „.TD-DIV”DOT selektywne i odpowiedni id, i zastosuj właściwości CSS podane poniżej:

• • Wartość „wyświetlacz„Własność jest ustalona jako„Komórka stołowa”, Który jest wykorzystywany do tworzenia komórki i dodawania danych do komórki.
  • "szerokość”Określa rozmiar komórki tabeli poziomo.
  • "granica”Definiuje granicę wokół komórek.
  • "margines„Nieruchomość przydziela przestrzeń poza zdefiniowaną granicą.
  • "wyściółka”Określa przestrzeń wewnątrz granicy.

Wyjście

Dlaczego warto używać „Wyświetl: komórek stołowy” w CSS?

„„Wyświetl: komórek stołowy„Właściwość CSS jest używana do ustawiania wyświetlacza do danych, która sprawia, że ​​element zachowuje się jak tabela. Tak więc użytkownicy mogą utworzyć duplikat 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ść określa dane w postaci tabeli.

Wniosek

Używać „Wyświetl: komórek stołowy„Propółta CSS, utwórz zagnieżdżone kontenery Div i wstaw klasę do każdego pojemnika o określonej nazwie. Następnie uzyskaj dostęp do kontenera Div w CSS i zastosuj właściwość „Wyświetl: komórek stołowy”, w której „wyświetlacz„Właściwość jest wykorzystywana do ustawiania danych w komórkach tabeli. W tym poście pokazano metodę wykorzystania właściwości CSS wyświetlacza:.