So machen Sie die HTML -Tabelle vertikal scrollbar

Jean Dengler
So machen Sie die HTML -Tabelle vertikal scrollbar
HTML ist eine Markup -Sprache, die Entwicklern hilft, eine interaktive Website zu erstellen, und CSS -Eigenschaften werden verwendet, um sie reaktionsschneller zu machen. Es kann auch bestimmen, wie die Elemente der Website angezeigt werden. Insbesondere über HTML -Tabellen können Benutzer auch umfangreiche Daten in Zeilen und Spalten erstellen und speichern. HTML ermöglicht es Ihnen auch, die Zeilen und Spalten vertikal zu scrollen.

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.

    Python
    Matplotlib 2D -Histogramm
    In Python das „PLT.Hist2d () ”-Funktion des„ Pyplot “-Moduls in der Bibliothek„ Matplotlib “wird ver...
    Christopher Lammert
    Python
    Konvertieren Sie eine Schnur in JSON Python
    Das JSON -Modulfunktion, die Funktion „AST“ -Modul oder die Funktion „eval ()“ wird verwendet, um ei...
    Frederik Rodehau
    Docker
    Was ist der Unterschied zwischen Docker und Podman?
    Docker verwendet eine Client-Server-Architektur, während Podman ein Dämon weniger Container-Engine i...
    Christopher Lammert