Zwic stołowy z HTML i CSS
Gdy użytkownik projektuje bazę danych do zarządzania danymi pracowników w firmie, większość danych i rekordów nie może zmieścić się w jednym arkuszu lub tabeli. Aby zarządzać danymi, użytkownik sprawia, że arkusz jest przewijany. Istnieją dwa rodzaje „Scrollable". Pierwszy jest wierny pionowo, a drugi jest przewijany w poziomie. Poziome przewijane pozwala użytkownikowi przewijać zawartość okna w lewo lub w prawo. Podczas gdy pionowy pasek przewijania pozwala użytkownikowi przewijać w górę lub w dół zawartości.
Ten post określi:
- Metoda 1: Jak przewiń przewijanie poziomo z HTML/CSS?
- Metoda 2: Jak przewiń przewiń pionowo z HTML/CSS?
Metoda 1: Jak przewiń przewijanie poziomo z HTML/CSS?
Aby zrobić tabelę przewiń poziomo z HTML/CSS, najpierw zaprojektuj tabelę, wykorzystując „ Aby uzyskać praktyczne implikacje, wypróbuj metodę poniżej określonej. Krok 1: Dodaj kontener DIV W celu utworzenia kontenera Div dodaj „„Element w dokumencie HTML. Krok 2: Zaprojektuj tabelę Następnie skorzystaj z „ Krok 3: Dodaj dane w tabeli Następnie dodaj następujące elementy, aby dodać dane: Można zauważyć, że stół został pomyślnie dodany: Krok 5: Style Div Container Uzyskaj dostęp do kontenera Div za pomocą zdefiniowanej wartości atrybutu z selektorem atrybutu. Aby to zrobić, „#główna zawartość”W tym scenariuszu wykorzystywane jest: Następnie zastosuj te właściwości CSS: Wyjście Krok 6: Spraw, by tabelę były przewijane Teraz skorzystaj z nazwy klasy, aby uzyskać dostęp do tabeli i zastosuj poniżej podawane właściwości, aby tabela była przewijana w poziomie: Zgodnie z danym kodem: Wyjście Krok 7: Tabela stylu W celu stylizacji stołu, dostęp do „tabela”I dane tabeli za pomocą„TD”: Tutaj: Krok 6: Stylowa nagłówek Dostęp do stołu na kierunku za pomocą „th”: Aplikować "kolor tła„Właściwość, aby ustawić kolor na odwrocie elementu. Metoda 2: Jak przewiń przewiń pionowo z HTML/CSS? Aby przewijać tabelę pionowo za pomocą HTML/CSS, ustaw szerokość tabeli Uzyskaj dostęp do tabeli za pomocą nazwy klasy „.Data stołowa”I zastosuj poniżej wspomniane właściwości w fragmencie kodu: Tutaj: Wyjście To wszystko o przewijaniu stołu z HTML i CSS. Wniosek Aby skręcić z tabeli z HTML i CSS, najpierw utwórz tabelę za pomocą „" element. Następnie ustaw „wysokość" I "szerokość”Tabeli w CSS i zastosuj„przelewowy„Własność o wartości”zwój".
”Tag do zaprojektowania tabeli, aby dodać dane do strony HTML. Następnie dodaj następujący atrybut wewnątrz znacznika tabeli:
”Element jest wykorzystywany do definiowania wierszy w tabeli. Element określa komórkę jako nagłówek grupy komórek tabeli. ”Służy do dodania danych w tabeli: Członkowie zespołu Sharqa Członkowie zespołu Adnana Członkowie zespołu USAMA Sharqa Adnan Usama Hafsa Arej Zara Farah Minhal Zainab Maria Anees Faiza Umar Taimoor Awais Farhan Hammad Aliyan Rafia Haroon Yumna Laiba Hadia Rafia Shahrukh Talha duński Nadia Mukh Nimra
Border: 3px Groove Blue;
Margines: 30px 60px;
Wyściółka: 30px;
szerokość: 250px;
Wysokość: 360px;
Overflow: Scroll;
Kolor: RGB (66, 40, 233);
kolor tła: RGB (243, 164, 164);
kolor tła: RGB (193, 225, 228);
szerokość: 400px;
Wysokość: 150px;
Overflow: Scroll;
" element. Następnie uzyskaj dostęp do tabeli w CSS i zastosuj „wysokość”, Szerokość i„przelewowy„Właściwości na stole. W tym celu wartość „przelewowy”Jest określony jako„zwój”, Co sprawia, że element jest przewijany, jeśli dane elementu mają długość. Ten samouczek wyjaśnił metodę projektowania przewijanego stołu za pomocą HTML i CSS.