So machen Sie die HTML -Tabelle vertikal scrollbar
Dieser Beitrag erklärt die Methode, um die HTML -Tabelle vertikal scrollbar zu machen.
So machen Sie die HTML -Tabelle vertikal scrollbar?
Um eine Tabelle in HTML vertikal scrollbar zu erstellen, erstellen Sie zunächst eine Tabelle und fügen Sie die relevanten Daten hinzu. Wenden Sie dann die CSS -Eigenschaften an “Überlauf-X" Und "Überlauf-y”.
Die Eigenschaft "Überlauf-X" mit dem Wert "versteckt”Klammern den Überlauf. Darüber hinaus die Eigenschaft "Überlauf-y" mit dem Wert "scrollen”Ermöglicht es Ihnen, den Tisch auf und ab zu scrollen.
Probieren Sie dazu die angegebenen Anweisungen aus.
Schritt 1: Erstellen Sie einen Div -Container
Erstellen Sie zunächst eine “”Container. Fügen Sie dann ein Klassenattribut als “ein“ ein “Div-Scroll”.
Schritt 2: Erstellen Sie eine Tabelle in HTML
Um eine Tabelle in HTML zu erstellen, befolgen Sie die angegebenen Anweisungen:
- Erstellen Sie eine Tabelle, indem Sie das verwenden “
" Schild.
- Setzen Sie die “Grenze" als "1px”Und richten Sie die Tabelle in der Mitte aus, indem Sie die“ verwenden “ausrichten”Attribut.
- Der "
Das Tag wird verwendet, um die Zeilen in der Tabelle anzugeben. - “
Das Tag wird verwendet, um die Überschrift zur Tabelle hinzuzufügen. - “
”Wird zum Einfügen von Daten in die Tabelle verwendet: Name AUSWEIS Kategorie Jenny 01 Docker Herry 02 HTML/CSS Heiraten 03 Git Jazzy 04 JavaScript Edward 05 Fenster Bella 06 Zwietracht Hase 07 Git Jack 08 HTML/CSS
Es kann beobachtet werden, dass die Tabelle erfolgreich erstellt wurde:
Schritt 3: Zugangsklasse und Tabelle
Zugang nun auf die “div"Element, indem Sie die" verwenden ".Div-Scroll" Klassenname. Der "Tisch”Wird verwendet, um auf das Tabellenelement des Div -Containers zuzugreifen.
Schritt 4: Stiltabelle in CSS
Um die Tabelle in CSS zu stylen, verwenden Sie die folgenden Eigenschaften:
.Div-Scroll, Tabelle
Polsterung: 12px;
Höhe: 200px;
Breite: 500px;
Border-Radius: 10px;
Box-Shadow: 1PX 2PX 1PX 2PX RGB (230, 229, 229);
Rand: 15px;
Grenze: 1PX Solid #141313;
Hintergrundfarbe: #CBEAF8;
Überlauf-y: Scroll;
Überlauf-X: versteckt;
Hier ist die Beschreibung des oben genannten Code:
- “PolsterungEigenschaft wird verwendet, um den Raum um das Element zu setzen.
- “Höhe"Definiert die Elementhöhe, die als" festgelegt wird "200px”.
- “Breite”Legt die Elementbreite fest.
- “Grenzradius”Definiert den Radius des Elements. Dadurch kann der Benutzer dem Element eine abgerundete Ecke hinzufügen.
- “Box SchattenEigenschaft legt den Schattenrahmen um das Element um.
- “Rand”Wird verwendet, um den Raum um das Element zu setzen.
- “GrenzeDas Eigentum wird hinzugefügt, um eine Grenze festzulegen.
- “HintergrundfarbeDie Funktion wird verwendet, um die Farbe der Tabelle auf der Rückseite festzulegen.
- “Überlauf-y”Wird als" eingestellt "scrollenUm es vertikal scrollbar zu machen.
- “Überlauf-X”Gibt den Wert an als"versteckt”.
Es kann beobachtet werden, dass wir die Tabelle erfolgreich vertikal scrollbar gemacht haben:
Wir haben die Methode erklärt, um die Tabelle vertikal scrollbar zu machen.
Abschluss
Um die HTML -Tabelle vertikal scrollierbar zu machen, erstellen Sie zunächst die Tabelle, indem Sie die „verwenden“
" Schild. Wenden Sie dann CSS -Eigenschaften an, um die Tabelle zu stylen. Setzen Sie außerdem den Wert der “Überlauf-XEigentum als "versteckt" Und "Überlauf-y" als "scrollen”Um die Tabelle zu scrollen zu lassen. Dieser Beitrag hat die Prozedur für die vertikal scrollierbare Tafel bereitgestellt.
- « So fusionieren Sie zwei Arrays in JavaScript- und De-Duplikat-Elementen
- So erstellen Sie ein Administrationskonto mit Regedit »