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

142

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.

Tsundoku
quelle
3
... darüber nachgedacht, den ganzen Tisch in ein Div zu stellen? ... dann Bildlauf zum Div hinzufügen?
Vektor
3
Vielleicht ist es an der Zeit zu ändern, welche Antwort die akzeptierte Antwort ist?
Serge Stroobandt

Antworten:

81

Haben Sie die CSS- overflowEigenschaft ausprobiert ?

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

UPDATE
Wie andere Benutzer betonen, reicht dies nicht aus , um die Bildlaufleisten hinzuzufügen.
Bitte lesen und bewerten Sie die Kommentare und Antworten unten.

pasine
quelle
15
Nach meinen eigenen Versuchen und allem anderen, was ich im Internet gelesen habe, wird dies einfach nicht funktionieren. Sie können zwar ein Wrapper-Element überlaufen lassen, aber nicht die Tabelle selbst.
Bloudermilk
21
@bloudermilk Sie können, wenn Sie hinzufügen display: block.
Cees Timmerman
243

Machen Sie zuerst einen display: blockaus Ihrem Tisch

dann eingestellt overflow-x:zu auto.

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

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.

Serge Stroobandt
quelle
3
Dies funktioniert bei mir in Chrome, aber erst, nachdem alles zusammengedrückt wurde. white-space: nowrap;hilft sofort die Bildlaufleiste zu sehen.
Cees Timmerman
28
Ich habe das schon einmal versucht. Das einzige Problem war, dass die Tabellenzellen nicht mehr die gesamte Breite der Tabelle ausfüllten.
Shevy
4
Wie von anderen gesagt, funktioniert dies nicht richtig: Tabellenzeilen füllen die Tabellenbreite nicht aus.
Collimarco
1
@ SergeStroobandt nein, in meinem Fall 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.
Collimarco
3
@collimarco Hinweis Ich musste max-width: 100% für die Inline-Block-Option verwenden.
Dogoncouch
40

Wickeln Sie die Tabelle in einen DIV, der wie folgt eingerichtet ist:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}
Colin M.
quelle
8
Es scheint, dass das overflow:autohier 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!
JonnyRaa
17

Verwenden Sie dazu das CSS-Attribut " Überlauf ".

Kurze Zusammenfassung:

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

z.B

table {
    display: block;
    overflow: scroll;
}
Roger Willcocks
quelle
Link zur Verfügung gestellt ist defekt
Justingordon
11

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.

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.

Mary7678
quelle
10

Ich konnte keine der oben genannten Lösungen zum Laufen 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>

mpen
quelle
Keiner der oben genannten Punkte hat auch für mich funktioniert, aber das hat funktioniert. Schön, danke.
Gábriel
@ Gábriel Schön, dass es bei dir funktioniert hat. Ich habe es gerade in Firefox erneut versucht und es scheint nicht richtig zu rendern :-( i.imgur.com/BcjSaCV.png Chrome sieht immer noch gut aus.
mpen
1
Seltsam; Ich habe es genau unter Firefox verwendet und es hat dort funktioniert - obwohl nicht genau in diesem Setup. Ich wollte ein großes Raster aus 10 x 10 px Divs mit reduzierten Rändern und der maximalen Breite + dem Überlauf-x rendern: auto schien der Schlüssel zu sein. Mit diesen sah alles perfekt aus. Außerdem verwende ich überhaupt nicht <table>, sondern nur divs mit Anzeige: table, table-row und table-cell.
Gábriel
10

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.

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

<div class="table_wrapper">
<table>
...
</table>
</div>
ochomoswill
quelle
2
Das white-space: nowrap;scheint optional zu sein.
Mike Shiyan
8

Ich hatte das gleiche Problem. Ich habe die folgende Lösung entdeckt, die nur in Chrome v31 getestet wurde:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}
Josh
quelle
2

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.

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;
}
George
quelle
@Saeed Meinten Sie so etwas wie HTML-Struktur?
George
Mein schlechtes, ich meine, füge mehr Erklärungen hinzu, um es besser zu verstehen
Mastisa
Hoffe, diese Version ist klarer.
George
1

Die "mehr als 100% Breite" auf dem Tisch hat es wirklich für mich funktionieren lassen.

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

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

Peps
quelle
-2
//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>
Kinzzy Goel
quelle
Einrückungs- und Beispieldaten sind hilfreich, wenn Sie etwas vorführen möchten. Meinten Sie auch "Bildlaufleiste" anstelle von "Dropdown"?
Cees Timmerman