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 »</a></p>
</div>
Ich habe versucht, die maximale Höhe und die feste Höhe auf den Tisch anzuwenden, aber es funktioniert nicht.
twitter-bootstrap
Pangi
quelle
quelle
overflow
nur auf den Hauptteil der Tabelle anzuwenden, aber wo die<thead>
Teile immer angezeigt werden?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/
quelle
.span3
auf allespan3
Elemente auf Ihrer gesamten Bootstrap-gesteuerten Site aus.Benötigen Sie nicht die Verpackung in einem Div ...
CSS :
Bootply : http://www.bootply.com/AgI8LpDugl
quelle
td
Element in der Größe variieren. bootply.com/OsvzINuTUAIch 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.
Und dann einfach das folgende CSS angewendet:
Ich hoffe das hilft jemand anderem.
quelle
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:
Wenn Sie anglejs nicht verwenden, können Sie das Javascript der Direktive optimieren und stattdessen direkt verwenden.
quelle
CSS
HTML
quelle
.table-class-name { height: 100%; }
.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:
quelle
Stellen Sie den Tisch in ein Div und geben Sie diesem Div die Klasse
pre-scrollable
.quelle
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:
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:
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:
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.
quelle
Bei allen oben genannten Lösungen wird auch der Tabellenkopf gescrollt ... Wenn Sie nur einen Bildlauf durchführen möchten, wenden Sie Folgendes an:
quelle
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.
quelle
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:
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:
quelle
Legen Sie die Tabelle in das div, um eine scrollbare Tabelle vertikal zu erstellen. Wechseln Sie
overflow-y
zuoverflow-x
, um die Tabelle horizontal scrollbar zu machen. Nuroverflow
um die Tabelle horizontal und vertikal scrollbar zu machen.quelle
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 ...
Ich habe auch die funktionierende jsfindle angebracht.
https://jsfiddle.net/jgngg28t/
Hoffe es hilft jemand anderem.
quelle