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.

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.

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.

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

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

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

Kurze Zusammenfassung:

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

z.B

table {
    display: block;
    overflow: scroll;
}

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.

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>

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>

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;
}

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;
}

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%;
}

//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>