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 » Jawa Jakie są wyrażenia, stwierdzenia i bloki w Javie „Wyrażenie” odnosi się do linii kodu, która utrzymuje lub oblicza wartości, „instrukcje” są kompletn... Oliwia Makowski Doker Jak użyć polecenia „kopiowanie dokera” do przesyłania pliku z kontenera Docker na komputer hosta? Aby przenieść określony plik z kontenera na komputer hosta, użyj polecenia „Docker CP”.... Pani Alicja Szafrański JavaScript Jak TypeScript różni się od JavaScript? Główną różnicą między TypeScript i JavaScript jest to, że TypeScript jest Superset JavaScript, rozsz... Pani Alicja Szafrański Pyton Grupa Pandy przez kwantyl Renata Borowiec Pyton Filtruj nan pandy Makary Stasiak Pyton Numpy Save Dict Albert Szcześniak Pyton Usuń znaki specjalne z Python String Justyna Flak Pyton Seborn poziome działki barowe Larysa Witczak Pyton Python Write String do pliku Renata Borowiec Pyton Python OS Mkdir Larysa Witczak Polecenia Linux Jak zainstalować wersję CUDA w Linux Maja Kucharski php Jak pobrać listę stref Pani Alicja Szafrański Golang Jak używać czasu.Teraz funkcja w Golang - przykłady Pani Alicja Szafrański