Jak zrobić responsywną tabelę - CSS

Responsywna tabela

W powyższym fragmencie kodu HTML:

• Jakiś "

  „Nagłówek został dodany do tekstu„Responsywna tabela".

• A "„Element kontenera jest zdefiniowany z klasą zadeklarowaną jako„moja klasa".
• Potem „”Element jest dodawany do utworzenia tabeli na stronie internetowej.
  W środku "
  „Element, cztery”„Dodano elementy, aby wykonać cztery rzędy tabeli.
  W pierwszym rzędzie wielu „

  „Dodano elementy, które definiują zawartość nagłówka. W drugim, trzecim i czwartym rzędzie „„

  „Dodano elementy, aby wstawić zawartość w wierszach tabeli. 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: .moja klasa 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; W powyższym elemencie stylu CSS: Selektor klasowy „.moja klasa”Dodano, że odnosi się do kontenera Div, w którym stworzono tabelę. Wewnątrz „„przepełnienie-x„Własność jest zdefiniowana o wartości”automatyczny". To stworzy poziomy pasek przewijania na końcu stołu. Następnie istnieje selektor elementu tabeli, który ma w nim zdefiniowane właściwości CSS. „„Obramowanie graniczne”Właściwość definiuje przestrzenie między komórkami tabeli jako zero. „„szerokość„Własność zdefiniowana jako„100%„Rozszerza tabelę w taki sposób, że obejmuje cały poziom poziomego ekranu. „„granica„Własność ustawia granicę tabeli na„1px" Tutaj. Potem „„th" I "TD”Selektory elementów definiują właściwości dla nagłówków tabeli i komórek tabeli. Wewnątrz jest „tekst-align„Właściwość, która wyrównuje zawartość po lewej stronie ekranu. „„wyściółka„Własność określa odległość między treścią a granicą jako„8px". „„kolor tła”Własność jest dodawana z zdefiniowanym w nim kolorem tła dla połowy rzędów tabeli. 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ę. « Jak mogę uzyskać najnowszą nazwę tagu w bieżącej gałęzi w git? Jak sortować słownik według wartości w JavaScript » Polecenia Linux Jak generować klawisze SSH w systemie Windows Top 10/Top 10, aby uzyskać dostęp do serwerów Linux bez haseł Praktyczny samouczek na temat generowania klawisza SSH w systemie Windows 10 i 11 i zainstalowania g... Pani Julia Szwed Sqlite Do czego służy SQLite? Czy to jest lepsze niż sql? SQLite to baza danych oparta na plikach, która jest samodzielna, bez serwera i nie wymaga żadnej oso... Justyna Flak PowerShell Jak używać polecenia „Get-command” w PowerShell CMDLET „Get-command” otrzymuje listę poleceń dostępnych na komputerze. Ponadto może importować moduł... Bruno Dobrowolski Pyton Pandas read_csv multiprocessing Oliwia Makowski Pyton MATPLOTLIB 2D Histogram Maja Kucharski Polecenia Linux Jak zainstalować wersję CUDA w Linux Maja Kucharski Jawa Jak używać słów kluczowych bajtów w Javie Pani Alicja Szafrański Doker Jakie są kroki do wdrożenia obrazu Nginx za pomocą Dockera? Justyna Flak Oracle Linux Jakie są różnice między Oracle Linux i Ubuntu Linux? Renata Borowiec AWS Czym EC2 różni się od elastycznej lodu fasoli? Igor Skrzypek JavaScript Jak sprawdzić wersję TypeScript Renata Borowiec Git Jak wygenerować plik git za pomocą terminalu? |. Wyjaśnione Bertram Jóźwiak Wireshark Zrozumienie DHCP za pomocą Wireshark Justyna Flak