Tabellenrolle mit HTML und CSS
Wenn ein Benutzer eine Datenbank entwirft, um Mitarbeiterdaten in einem Unternehmen zu verwalten. Um die Daten zu verwalten, macht der Benutzer das Blatt scrollbar. Es gibt zwei Arten von “scrollbar”. Der erste ist vertikal scrollbar, und die zweite ist horizontal scrollbar. Durch das horizontale Scrollen kann der Benutzer den Inhalt des Fensters nach links oder rechts scrollen. Während die vertikale Bildlaufleiste dem Benutzer es ermöglicht, den Inhalt nach oben oder unten zu scrollen.
Dieser Beitrag wird angeben:
- Methode 1: Wie man horizontal mit HTML/CSS scrollen?
- Methode 2: Wie man scrollisch mit HTML/CSS scrollen?
Methode 1: Wie man horizontal mit HTML/CSS scrollen?
Um eine Tabelle horizontal mit dem HTML/CSS zu erstellen, entwerfen Sie zunächst eine Tabelle, indem Sie die “verwenden Probieren Sie die unterbezeichnete Methode aus, um praktische Auswirkungen zu erhalten. Schritt 1: Fügen Sie einen DIV -Behälter hinzu Fügen Sie zum Zwecke der Erstellung eines Div -Containers das hinzu “Element im HTML -Dokument. Schritt 2: Entwerfen Sie eine Tabelle Als nächstes verwenden Sie die “ Schritt 3: Daten in der Tabelle hinzufügen Fügen Sie als nächstes die folgenden Elemente hinzu, um die Daten hinzuzufügen: Es ist ersichtlich, dass die Tabelle erfolgreich hinzugefügt wurde: Schritt 5: Stil -Div -Container Greifen Sie auf den Div -Container zu, indem Sie den definierten Attributwert mit dem Attributauswahl verwenden. Um dies zu tun, die “#Hauptinhalt”Wird in diesem Szenario verwendet: Wenden Sie dann diese CSS -Eigenschaften an: Ausgang Schritt 6: Machen Sie die Tabelle horizontal scrollbar Verwenden Sie nun den Klassennamen, um auf die Tabelle zuzugreifen, und wenden Sie die folgenden Eigenschaften an, um die Tabelle horizontal scrollbar zu machen: Nach dem angegebenen Code: Ausgang Schritt 7: Stiltabelle Greifen Sie auf die “auf die“ auf die “zu"Tisch"Und Tabellendaten mit"td”: Hier: Schritt 6: Stiltischüberschrift Zugreifen Sie mit Hilfe von “auf die Tischüberschrift“th”: Wende an "Hintergrundfarbe”Eigenschaft, um die Farbe auf der Rückseite des Elements festzulegen. Methode 2: Wie man scrollisch mit HTML/CSS scrollen? So setzen.Tischdaten”Und wenden Sie die unten erwähnten Eigenschaften im Code-Snippet an: Hier: Ausgang Das dreht sich nur um die Tischrolle mit HTML und CSS. Abschluss Erstellen Sie zunächst eine Tabelle mit HTML und CSS, um eine Tabelle zu erstellen, indem Sie die “verwenden" Element. Dann setzen Sie die “Höhe" Und "Breite”Der Tabelle in CSS und wenden Sie die“ anÜberlauf”Eigenschaft mit dem Wert“scrollen”.
”Tag zum Entwerfen einer Tabelle zum Hinzufügen von Daten zur HTML -Seite. Fügen Sie dann das folgende Attribut in das Tabellen -Tag hinzu:
Das Element wird zum Definieren der Zeilen in der Tabelle verwendet. Element bestimmt eine Zelle als Header einer Gruppe von Tabellenzellen. ”Wird verwendet, um die Daten in der Tabelle hinzuzufügen: Team Sharqa -Mitglieder Team Adnan -Mitglieder Team USAA -Mitglieder Sharqa Adnan USAMA Hafsa Areej Zara Farah Minhal Zainab Maria Anees Faiza Umar Taimoor Awais Farhan Hammad Aliyan Rafia Haroon Yumna Laiba Hadia Rafia Shahrukh Talha dänisch Nadia Mukh Nimra
Grenze: 3px Groove Blue;
Rand: 30px 60px;
Polsterung: 30px;
Breite: 250px;
Höhe: 360px;
Überlauf: Scrollen;
Farbe: RGB (66, 40, 233);
Hintergrundfarbe: RGB (243, 164, 164);
Hintergrundfarbe: RGB (193, 225, 228);
Breite: 400px;
Höhe: 150px;
Überlauf: Scrollen;
" Element. Greifen Sie dann in CSS auf die Tabelle zu und wenden Sie sich an “die Höhe", Breite und"ÜberlaufEigenschaften auf dem Tisch. Zu diesem Zweck der Wert der “Überlauf"Ist als" spezifiziert als "scrollen”, Was das Element scrollbar macht, wenn die Daten des Elements Länge sind. Dieses Tutorial hat die Methode zum Entwerfen der scrollbaren Tabelle mithilfe von HTML und CSS erläutert.