web-dev-qa-db-de.com

Fügen Sie der HTML-Tabelle eine horizontale Bildlaufleiste hinzu

Gibt es eine Möglichkeit, einer HTML-Tabelle eine horizontale Bildlaufleiste hinzuzufügen? Ich brauche es eigentlich, um sowohl vertikal als auch horizontal scrollbar zu sein, abhängig davon, wie die Tabelle wächst, aber ich kann keine Scrollbar erhalten.

90
Tsundoku

Haben Sie die CSS-Eigenschaft overflow ausprobiert?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

UPDATE
Wie andere Benutzer darauf hinweisen, ist das nicht genug, um die Bildlaufleisten hinzuzufügen.
.__ Bitte sehen Sie sich unten Kommentare und Antworten an.

58
pasine

Machen Sie zunächst einen display: block Ihrer Tabelle

setzen Sie dann overflow-x: auf auto.

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

Schön und sauber. Keine überflüssige Formatierung.

Hier sind weitere Beispiele mit Bildunterschriften zum Blättern von einer Seite auf meiner Website.

143

Wickeln Sie die Tabelle in ein DIV mit dem folgenden Stil ein:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}
35
Colin M

Verwenden Sie dazu das CSS-Attribut " overflow ".

Kurze Zusammenfassung:

overflow: visible|hidden|scroll|auto|initial|inherit;

z.B.

table {
    display: block;
    overflow: scroll;
}
16
Roger Willcocks

Ich hatte die gleiche Ausgabe. Ich habe die folgende Lösung gefunden, die nur in Chrome v31 getestet wurde:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}
7
Josh

Ich konnte keine der oben genannten Lösungen zur Arbeit bringen. Ich habe jedoch einen Hack gefunden:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}
<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

5
mpen

Dies ist eine Verbesserung der Antwort von Serge Stroobandt und funktioniert einwandfrei. Es löst das Problem, dass die Tabelle nicht die gesamte Seitenbreite ausfüllt, wenn sie weniger Spalten hat.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>
4
ochomoswill

Ich fand diese Antwort basierend auf der vorherigen Lösung und ihrem Kommentar und fügte einige eigene Anpassungen hinzu. Das funktioniert für mich am Responsive Table.

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}
2
George Wu

Ich hatte guten Erfolg mit der von @Serge Stroobandt vorgeschlagenen Lösung, aber ich hatte das Problem, dass @Shevy hatte, dass die Zellen dann nicht die volle Breite des Tisches füllten. Ich konnte dieses Problem beheben, indem ich der tbody einige Stile hinzufügte.

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

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

Dies funktionierte für mich in Firefox, Chrome und Safari auf dem Mac.

2
Mary7678

Die "mehr als 100% Breite" auf dem Tisch machte es für mich wirklich gut.

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

0
Peps