Wie füge ich Bildlaufleisten zu einer HTML5-Tabelle hinzu?

So fügen Sie Bildlauffähigkeit zu HTML5-Tabellen hinzu

Um einer Tabelle mit nur einer begrenzten Anzahl angezeigter Zeilen eine Bildlaufleiste hinzuzufügen, befolgen Sie diese Schritte :

1. Definieren Sie die Tabellenstruktur:

Erstellen Sie eine einfache HTML5-Tabelle mit den erforderlichen Spalten und Zeilen. Zum Beispiel:

<table>

2. Legen Sie das Tabellen-CSS fest:

Um die Tabelle zu formatieren, verwenden Sie CSS, um ihre Abmessungen, Farben und Ausrichtung anzugeben. Zum Beispiel:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

3. Erstellen Sie eine Bildlaufleiste:

Um die Bildlaufleiste hinzuzufügen, konzentrieren Sie sich auf den Hauptteil der Tabelle. Dieser Abschnitt sollte wie folgt konfiguriert sein:

tbody {
    overflow: auto;
    height: 150px;
}

• Überlauf: Automatisch ermöglicht das Scrollen, wenn der Tabelleninhalt seine Höhe überschreitet.
• Höhe: 150px setzt die sichtbare Höhe der Tabelle auf 150 Pixel, um sicherzustellen, dass jeweils nur wenige Zeilen angezeigt werden.

4. Spaltenausrichtung beibehalten:

Wenn Ihre Tabelle eine Kopfzeile hat, müssen Sie sicherstellen, dass diese beim Scrollen am Hauptteil ausgerichtet bleibt. Dies kann erreicht werden, indem beide Elemente in eine tableSection-Klasse eingeschlossen werden und das folgende CSS angewendet wird:

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}

5. Spaltenbreiten anpassen (optional):

Um sicherzustellen, dass alle Tabellenspalten unabhängig von ihrem Inhalt die gleiche Breite haben, können Sie das folgende CSS einbinden:

table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

6. Bildlaufleisten aus der Kopfzeile entfernen (optional):

Wenn Sie nicht möchten, dass die Kopfzeile scrollbar sein soll, fügen Sie die folgende CSS-Regel hinzu:

table.tableSection thead {
    overflow: hidden;
}

7. Behandeln Sie das Vorhandensein einer Bildlaufleiste (optional):

Um Ihr CSS basierend auf dem Vorhandensein einer Bildlaufleiste dynamisch anzupassen, sollten Sie JavaScript verwenden, um deren Vorhandensein zu erkennen und die erforderlichen Stile anzuwenden.

Das obige ist der detaillierte Inhalt vonWie füge ich Bildlaufleisten zu einer HTML5-Tabelle hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!