„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie füge ich HTML -Tabellen horizontales Scrollen hinzu?

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

Gepostet am 2025-02-27
Durchsuche:792

How to Add Horizontal Scrolling to HTML Tables?

erweitern HTML -Tabellen mit horizontalem Scrolling

Bei der Behandlung umfangreicher Datentabellen werden die Benutzererfahrung erweitert, indem sie sowohl vertikale als auch horizontale Scrolling -Kapazitäten bereitstellen. Dieser Artikel befasst sich mit der Hinzufügen einer horizontalen Scrollbar zu einer HTML -Tabelle und sorgt für eine nahtlose Navigation, unabhängig von der Inhaltsgröße des Tisches. Ein Block:

Setzen Sie die Anzeigeeigenschaft des -Elements zum Blockieren. Dadurch kann die Tabelle die volle Breite ihres Containers einnehmen.

Aktivieren Sie horizontales Scrollen:

Verwenden Sie die Überlauf-X-Eigenschaft und setzen Sie sie auf automatisch. Dadurch wird der Browser angewiesen, eine horizontale Bildlaufleiste anzuzeigen, wenn der Tabelleninhalt die verfügbare Breite überschreitet.

    Tabelle { Anzeige: Block; Überlauf-X: Auto; weißer Raum: Nowrap; }
  1. zusätzliche Überlegungen
  2. , um sicherzustellen, dass Zellen die gesamte Tabelle füllen, fügen Sie Ihren CSS den folgenden Code hinzu:
table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

für fortgeschrittenes Scrolling-Verhalten finden Sie in dieser Ressource: [Scrolling-Tabellenunterschriften] (https://www.lizkeogh.com/html-table-caption-scroll-floats/).

]
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3