Wie füge ich horizontales Scrollen zu HTML-Tabellen hinzu?

Erweitern von HTML-Tabellen mit horizontalem Scrollen

Beim Umgang mit umfangreichen Datentabellen wird es notwendig, die Benutzererfahrung durch die Bereitstellung sowohl vertikaler als auch vertikaler Tabellen zu verbessern horizontale Scrollfunktionen. In diesem Artikel erfahren Sie, wie Sie einer HTML-Tabelle eine horizontale Bildlaufleiste hinzufügen und so eine nahtlose Navigation unabhängig von der Inhaltsgröße der Tabelle gewährleisten.

Hinzufügen einer horizontalen Bildlaufleiste

Um horizontales Scrollen zu erreichen , folgen Sie diesen Schritten:

1. Zeigen Sie die Tabelle als Block an:Legen Sie die Anzeigeeigenschaft des fest Element, das blockiert werden soll. Dadurch kann die Tabelle die gesamte Breite ihres Containers einnehmen.
2. Horizontales Scrollen aktivieren:Verwenden Sie die Eigenschaft overflow-x und setzen Sie sie auf „Auto“. Dadurch wird der Browser angewiesen, eine horizontale Bildlaufleiste anzuzeigen, wenn der Tabelleninhalt die verfügbare Breite überschreitet.

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

Zusätzliche Überlegungen

• Um dies sicherzustellen Wenn die Zellen die gesamte Tabelle ausfüllen, fügen Sie den folgenden Code zu Ihrem CSS hinzu:

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

• For Weitere Informationen zum Scrollverhalten finden Sie in dieser Ressource: [Scrolling Table Captions](https://www.lizkeogh.com/html-table-caption-scroll-without-floats/).

Das obige ist der detaillierte Inhalt vonWie füge ich horizontales Scrollen zu HTML-Tabellen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!