Wie kann ich HTML-Tabellen mit vertikalen und horizontalen Bildlaufleisten erstellen?

Vertikale und horizontale Bildlaufleisten in HTML-Tabellen erreichen

Das Erstellen von Tabellen, die sowohl vertikales als auch horizontales Scrollen erfordern, kann eine Herausforderung sein. So erreichen Sie dies mit CSS:

1. Als Block anzeigen: Legen Sie display: block fest. damit die Tabelle sie wie einen Container behandelt.


2. Horizontales Scrollen aktivieren: overflow-x: auto anwenden; um horizontales Scrollen zu ermöglichen.


3. Zeilenumbrüche verhindern: Verwenden Sie white-space: nowrap um übermäßige Zeilenumbrüche innerhalb von Tabellenzellen zu verhindern.

Der folgende CSS-Code veranschaulicht diesen Ansatz:

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

Beispiel:

<table>

Zusätzliche Überlegungen:

• Um die Verteilung der Zellenbreite sicherzustellen, fügen Sie table tbody { display: table; Breite: 100 %; } zum CSS.
• Fortgeschrittenere Beispiele, wie z. B. Bildlauftabellenüberschriften, finden Sie in externen Ressourcen.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML-Tabellen mit vertikalen und horizontalen Bildlaufleisten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!