Jak zrobić responsywną tabelę - CSS
W tym artykule pokaże, w jaki sposób możemy wykonać responsywną tabelę za pośrednictwem CSS.
Jak stworzyć/utworzyć responsywną tabelę?
Tworzenie responsywnej tabeli w HTML wymaga użycia „przepełnienie-x„Własność w„„Element, w którym„ Składnia Tutaj właściwość „przepełnienia-X” dodaje pasek przewijania, aby stół reagował. Warunek: Utwórz tabelę Responsywna tabela W powyższym fragmencie kodu HTML: W elemencie stylu CSS wymagane jest zdefiniowanie „przepełnienie-x„Własność, aby stół reagował. Możesz także dodać inne właściwości, aby stół wyglądał bardziej prezentowalny: W powyższym elemencie stylu CSS: Powyższy kod stworzy szeroką tabelę w wyjściu, a następujące będzie wyświetlacz: Jeśli rozmiar ekranu zostanie zminimalizowany w taki sposób, aby przepełnia granice ekranu, u dołu będzie wyświetlany poziomy pasek przewijania z powodu użycia „przepełnienie-x" nieruchomość: To kończy się, jak zrobić responsywne tabele w HTML. Wniosek Responsywne tabele w HTML są tworzone przez dodanie CSS „przepełnienie-x„Właściwość dla elementu DIV, w którym jest tworzona tabela. Ta właściwość po prostu tworzy poziomy pasek przewijania na końcu stołu, który sprawia, że tabel. Ten post wykazał przydatną metodę, aby reagować prosty tabelę. " jest tworzone.
Składnia, aby dodać „przepełnienie-x„Własność, aby stół reagował na tabelę, jest następująca:
Utwórzmy tabelę, która jest rozszerzona poziomo w taki sposób, który przepełnia szerokość ekranu, dodając wiele „" I " " elementy: Nazwa Standard Wynik Wynik Wynik Wynik Wynik Wynik Wynik Wynik Wynik Wynik Wynik Wynik Wynik Kowal 8 50 50 50 50 50 50 50 50 50 50 50 50 50 Jacek 9 70 70 70 70 70 70 70 70 70 70 70 70 70 Jan 10 55 55 55 55 55 55 55 55 55 55 55 55 55
”Element jest dodawany do utworzenia tabeli na stronie internetowej.
„Element, cztery”
„Dodano elementy, aby wykonać cztery rzędy tabeli. „Dodano elementy, które definiują zawartość nagłówka. „Dodano elementy, aby wstawić zawartość w wierszach tabeli.
Overflow-X: Auto;
tabela
Strona graniczna: 0;
szerokość: 100%;
granica: 1px solid #ddd;
th, td
Text-Align: lewy;
Wyściółka: 8px;
TR: NTH-Child (nawet)
kolor tła: #f2f2f2;