Bildlaufbare Tabelle für den Twitter-Bootstrap

Ich möchte einen Tisch auf meiner Website haben. Das Problem ist, dass diese Tabelle ungefähr 400 Zeilen enthält. Wie kann ich die Höhe der Tabelle begrenzen und eine Bildlaufleiste darauf anwenden? Das ist mein Code:

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

Ich habe versucht, die maximale Höhe und die feste Höhe auf den Tisch anzuwenden, aber es funktioniert nicht.

Tabellenelemente scheinen dies nicht direkt zu unterstützen. Platzieren Sie den Tisch in einem Div und stellen Sie die Höhe des Div ein und stellen Sie ein overflow: auto.

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

Sie sollten es in ein eigenes div einschließen oder diesem span3 eine eigene ID geben, damit Sie nicht Ihr gesamtes Layout beeinflussen.

Hier ist eine Geige: http://jsfiddle.net/zm6rf/

Benötigen Sie nicht die Verpackung in einem Div ...

CSS :

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

Ich hatte das gleiche Problem und verwendete eine Kombination der oben genannten Lösungen (und fügte eine eigene Wendung hinzu). Beachten Sie, dass ich Spaltenbreiten angeben musste, um sie zwischen Header und Body konsistent zu halten.

In meiner Lösung bleiben Kopf- und Fußzeile fest, während der Körper rollt.

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

Und dann einfach das folgende CSS angewendet:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

Ich hoffe das hilft jemand anderem.

Ich musste dies kürzlich mit Bootstrap und AngularJS tun. Ich habe eine AngularJS-Direktive erstellt, die das Problem löst. Sie können ein funktionierendes Beispiel und Details in diesem Blog-Beitrag sehen .

Sie verwenden es nur, indem Sie dem Tabellen-Tag ein Attribut mit festem Header hinzufügen:

<table class="table table-bordered" fixed-header>
...
</table>

Wenn Sie anglejs nicht verwenden, können Sie das Javascript der Direktive optimieren und stattdessen direkt verwenden.

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

Dies ist möglicherweise keine Lösung für eine große Zeilenanzahl. Ich benutze einfach den Trick der Duplizierungstabelle, um die Sache für eine kleine Zeilenanzähltabelle zu erledigen, während sie die Breite der flexiblen Spalte beibehält. Sie können diese Geige ausprobieren .

(Die Spalte mit fester Breite ist die Methode, die ich für Tabellen mit großer Zeilenanzahl verwende, für die nur die Duplizierung der Kopfzeilen erforderlich ist.)

Beispielcode:

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

Stellen Sie den Tisch in ein Div und geben Sie diesem Div die Klasse pre-scrollable.

Ich hatte kürzlich ein ähnliches Problem und habe es schließlich mit einer Mischung aus verschiedenen Lösungen behoben.

Die erste und einfachste bestand darin, zwei Tabellen zu verwenden, eine für die Überschriften und eine für den Body. Dies funktioniert, aber die Überschriften und die Körperspalten sind nicht ausgerichtet. Und da ich die automatische Größe verwenden wollte, die mit Twitter-Bootstrap-Tabellen geliefert wird, habe ich eine Javascript-Funktion erstellt, die die Header ändert, wenn: der Body gerendert wird; Die Fenstergröße wird geändert. Die Daten in der Spalte ändern sich usw.

Hier ist ein Teil des Codes, den ich verwendet habe:

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

Die Header und der Body sind in zwei separate Tabellen unterteilt. Eine davon befindet sich in einem DIV mit dem erforderlichen Stil zum Generieren der vertikalen Bildlaufleisten. Hier ist das CSS, das ich verwendet habe:

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

Ich habe die Höhe hier kommentiert, weil ich wollte, dass die Tabelle den unteren Rand der Seite erreicht, unabhängig von der Seitenhöhe.

Die Datensortierattribute, die ich in den Headern verwendet habe, werden auch in jedem td verwendet. Auf diese Weise konnte ich die Breite und die Polsterung jedes td und die Breite der Reihe erhalten. Unter Verwendung der Datensortierattribute setze ich mit CSS den Abstand und die Breite jedes Headers entsprechend und der Headerzeile, die immer größer ist, da sie keine Bildlaufleiste hat. Hier ist die Funktion mit Coffeescript:

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

Hier gehe ich davon aus, dass Sie ein Array der Header mit dem Namen @headers haben.

Es ist nicht schön, aber es funktioniert. Hoffe es hilft jemandem.

Bei allen oben genannten Lösungen wird auch der Tabellenkopf gescrollt ... Wenn Sie nur einen Bildlauf durchführen möchten, wenden Sie Folgendes an:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

Keine dieser Antworten hat für mich zufriedenstellend funktioniert. Entweder haben sie die Tabellenüberschriftenzeile nicht fixiert, oder sie benötigten feste Spaltenbreiten, um zu funktionieren, und selbst dann neigten sie dazu, die Überschriftenzeile und die Textzeilen in verschiedenen Browsern falsch auszurichten.

Ich empfehle, in die Kugel zu beißen und eine geeignete Rastersteuerung wie jsGrid oder meinen persönlichen Favoriten SlickGrid zu verwenden . Dies führt natürlich zu einer Abhängigkeit. Wenn Sie jedoch möchten, dass sich Ihre Tabellen wie echte Raster mit browserübergreifender Unterstützung verhalten, können Sie sich die Haare aus dem Kopf ziehen. Sie haben auch die Möglichkeit, Spalten sowie jede Menge andere Funktionen zu sortieren und ihre Größe zu ändern, wenn Sie dies wünschen.

Zu Jonathan Woods Vorschlag. Ich habe nicht die Möglichkeit, Tabellen mit einem neuen div zu verpacken, da ich ein CMS verwende. Mit JQuery habe ich Folgendes getan:

$( "table" ).wrap( "<div class='table-overflow'></div>" );

Dies umschließt Tabellenelemente mit einem neuen div mit der Klasse "Tabellenüberlauf".

Sie können dann einfach die folgende Definition in Ihre CSS-Datei einfügen:

.table-overflow { overflow: auto; }     

Legen Sie die Tabelle in das div, um eine scrollbare Tabelle vertikal zu erstellen. Wechseln Sie overflow-yzu overflow-x, um die Tabelle horizontal scrollbar zu machen. Nur overflowum die Tabelle horizontal und vertikal scrollbar zu machen.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

Ich dachte, ich würde hier posten, da ich keines der oben genannten Elemente für Bootstrap 4 verwenden konnte. Ich fand dies online und arbeitete perfekt für mich ...

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

Ich habe auch die funktionierende jsfindle angebracht.

https://jsfiddle.net/jgngg28t/

Hoffe es hilft jemand anderem.