Gibt es eine Möglichkeit, einer HTML-Tabelle eine horizontale Bildlaufleiste hinzuzufügen? Ich brauche es tatsächlich, um vertikal und horizontal scrollbar zu sein, je nachdem, wie die Tabelle wächst, aber ich kann keine der Bildlaufleisten anzeigen.
html
css
html-table
scrollbar
Tsundoku
quelle
quelle
Antworten:
Haben Sie die CSS-
overflow
Eigenschaft ausprobiert ?UPDATE
Wie andere Benutzer betonen, reicht dies nicht aus , um die Bildlaufleisten hinzuzufügen.
Bitte lesen und bewerten Sie die Kommentare und Antworten unten.
quelle
display: block
.Machen Sie zuerst einen
display: block
aus Ihrem Tischdann eingestellt
overflow-x:
zuauto
.Schön und sauber. Keine überflüssige Formatierung.
Hier finden Sie ausführlichere Beispiele für das Scrollen von Tabellenbeschriftungen von einer Seite auf meiner Website.
quelle
white-space: nowrap;
hilft sofort die Bildlaufleiste zu sehen.white-space: nowrap;
löst das Problem nicht (getestet auf Firefox). Die Zeilenbreite ist kleiner als die Tabellenbreite, wenn nicht genügend Inhalt (Text) vorhanden ist, um die Zeilen zu erweitern.Wickeln Sie die Tabelle in einen DIV, der wie folgt eingerichtet ist:
quelle
overflow:auto
hier unnötig ist. Wissen Sie sowieso, um dies zu erreichen, ohne die Breite einzustellen ... das scheint immer die Lösung in HTML zu sein - Hardcode für eine gewisse Breite oder Höhe, aber das scheint den Sinn einer Layout-Engine zu zunichte zu machen!Verwenden Sie dazu das CSS-Attribut " Überlauf ".
Kurze Zusammenfassung:
z.B
quelle
Ich hatte guten Erfolg mit der von @Serge Stroobandt vorgeschlagenen Lösung, aber ich stieß auf das Problem, das @Shevy mit den Zellen hatte, die dann nicht die gesamte Breite der Tabelle ausfüllten. Ich konnte dies beheben, indem ich dem Stil einige Stile hinzufügte
tbody
.Dies funktionierte für mich in Firefox, Chrome und Safari auf dem Mac.
quelle
Ich konnte keine der oben genannten Lösungen zum Laufen bringen. Ich habe jedoch einen Hack gefunden:
quelle
Dies ist eine Verbesserung der Antwort von Serge Stroobandt und funktioniert perfekt. Es löst das Problem, dass die Tabelle nicht die gesamte Seitenbreite ausfüllt, wenn sie weniger Spalten enthält.
quelle
white-space: nowrap;
scheint optional zu sein.Ich hatte das gleiche Problem. Ich habe die folgende Lösung entdeckt, die nur in Chrome v31 getestet wurde:
quelle
table-layout: fixed
ist nett.Ich habe diese Antwort basierend auf der vorherigen Lösung und ihrem Kommentar herausgefunden und einige eigene Anpassungen hinzugefügt. Das funktioniert bei mir auf dem Responsive-Tisch.
quelle
Die "mehr als 100% Breite" auf dem Tisch hat es wirklich für mich funktionieren lassen.
quelle
quelle