Bildlaufbare Tabelle für den Twitter-Bootstrap

149

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.

Pangi
quelle

Antworten:

241

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.

Jonathan Wood
quelle
50
Hat das tatsächlich funktioniert? Ich habe es versucht und es hatte überhaupt keine Wirkung.
cjstehno
8
Nur zu Ihrer Information: Wenn Sie den Überlauf auf "Auto" anstatt auf "Überlauf: Scrollen" setzen, wird keine redundante horizontale Bildlaufleiste erstellt.
daCoda
8
@ JonathanWood: Gibt es eine Möglichkeit, overflownur auf den Hauptteil der Tabelle anzuwenden, aber wo die <thead>Teile immer angezeigt werden?
Willem Van Onsem
8
Nur um dies für die Menschen klar zu machen .... <div style = "overflow: auto;"> <table class = "table"> .... </ table> </ div>
Henry Weber
3
Bitte geben Sie ein kleines Beispiel!
Yahya Yahyaoui
53
.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/

Akkorde
quelle
2
Beachten Sie, dass das '! Wichtig' nicht wichtig ist;)
Akkorde
8
Seien Sie vorsichtig, wenn Sie diese Eigenschaften für festlegen, wirkt sich dies .span3auf alle span3 Elemente auf Ihrer gesamten Bootstrap-gesteuerten Site aus.
Terry
1
Sie können einen Höhenprozentsatz nur hinzufügen, wenn der übergeordnete Container eine Pixelhöhe hat. In Ihrem Fall müssten Sie beispielsweise .row auf 500px und .span3 auf 50% setzen. Wenn das übergeordnete Element keine festgelegte Höhe hat, verwendet der Browser standardmäßig die Inhaltshöhe, wenn Sie einen Prozentsatz angeben.
Akkorde
1
Können Sie dies tun, während Sie den Körper scollbar machen und den Thead nicht?
Straßenlaterne
1
Zu Ihrer Information: Wenn Sie Überlauf: Bildlauf einstellen, wird eine horizontale Bildlaufleiste erstellt, die möglicherweise redundant ist. Automatisch machen, dh Überlauf: Auto, macht das nicht.
daCoda
38

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

BENARD Patrick
quelle
Ich war sehr aufgeregt, als ich dieses Beispiel sah, aber es stellte sich heraus, dass das Layout "durcheinander gebracht" wird, wenn die Daten im tdElement in der Größe variieren. bootply.com/OsvzINuTUA
Frito
4
@Frito Mach dir keine Sorgen, sei glücklich;) Ich habe gerade das Tabellenlayout vergessen: behoben; ... Link aktualisiert
BENARD Patrick
30

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.

Todd
quelle
Danke, es hilft. Leider kann ich die Breite der Elemente nicht angeben, da es sich jedoch nicht um ein gültiges Element handelt. (???)
Erwin Rooijakkers
1
Spalten des td sind nicht mit den th Elementen ausgerichtet, da die Bildlaufleiste den Inhalt verschiebt
IHeartAndroid
Ahh ... Ich bin auf einem Mac, auf dem die Bildlaufleisten unsichtbar sind und nur beim Scrollen über dem Inhalt angezeigt werden. Das wird schwierig, da die Bildlaufleisten vom Betriebssystem und vom Browser abhängig sind.
Todd
9

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.

Jason
quelle
8

CSS

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

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>
Terry
quelle
Ist es möglich, die Höhe relativ zu halten?
Pangi
Ich möchte die Höhe mit Prozenten einstellen. Ist das möglich? Ich konnte es nicht zum Laufen bringen.
Pangi
Stellen Sie einfach die Tischhöhe auf 100% ein. .table-class-name { height: 100%; }.
Terry
Das erweitert meinen Tisch und geht weiter und weiter. (Es hat keine Wirkung)
Pangi
4
Bei dieser Methode kann der Header auch gescrollt werden. Gibt es also eine Möglichkeit, den Tabellenheader zu korrigieren?
Kyleinincubator
4

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>
Chukiat
quelle
4

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

Reza Saadati
quelle
3

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.

Guzmonne
quelle
3

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;
}
solo999
quelle
7
Dies funktioniert nur, wenn es sich um eine einzelne Spaltentabelle handelt. Wenn Sie eine Tabelle mit mehreren Spalten haben, wird nur die erste Spalte gescrollt.
Empo
2

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.

Simon Brangwin
quelle
2

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; }     
Scott
quelle
2

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>
Iqbal Pratomo Santoso
quelle
1

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.

BV2005
quelle