Wie kann ich eine HTML-Tabelle horizontal scrollbar machen?

Bildlauffähige HTML-Tabellen erstellen: Eine Anleitung zu horizontalen Bildlaufleisten

Das Hinzufügen sowohl vertikaler als auch horizontaler Bildlaufleisten zu einer HTML-Tabelle kann zunächst schwer fassbar erscheinen. Wenn man jedoch die grundlegenden CSS-Stile versteht, wird es zu einem unkomplizierten Prozess.

Die Tabelle horizontal scrollbar machen

Um horizontales Scrollen zu ermöglichen, sind die folgenden Schritte entscheidend:

1. Setze 'Anzeige: blockieren;' auf der Tabelle: Dadurch wird sichergestellt, dass sich die Tabelle wie ein Element auf Blockebene verhält und bei Bedarf ein Zeilenumbruch möglich ist.
2. Wenden Sie 'overflow-x: auto;' an. zur Tabelle: Dies aktiviert das automatische Erscheinen einer horizontalen Bildlaufleiste, wenn der Inhalt der Tabelle ihre horizontale Breite überschreitet.

Hier ein Beispiel:

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Zusätzliche Überlegungen

1. Zellenhöhe Nichtübereinstimmung: Manchmal füllen Tabellenzellen die Tabelle möglicherweise nicht vollständig aus, sodass das folgende zusätzliche CSS erforderlich ist:

   table tbody {
    display: table;
    width: 100%;
   }

2. Scrolling Table Captions: Für komplexere Szenarios mit Scrollen Wenn Sie Tabellenüberschriften benötigen, beachten Sie bitte die ausführlichen Beispiele auf der Website, auf die verwiesen wird.

Das obige ist der detaillierte Inhalt vonWie kann ich eine HTML-Tabelle horizontal scrollbar machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!