Kann Sperre ich die erste Spalte in einer Twitter-Bootstrap-Tabelle?
Ich habe ein großes scroll-in der Lage, Tabelle I gebaut mit Twitter bootstrap, möchte aber verhindern, dass die erste Spalte von Blättern. Ist das möglich?
<div class="row">
<div class="span12" style="height: auto !important;overflow-x: scroll;">';
<table class="table table-striped table-bordered table-condensed">
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
</div>
</div>
- nicht mit Bootstrap. könnte es möglich sein, mit einigen cleveren CSS-Positionierung und Polsterung, aber meiner Erfahrung nach, die Zellen der Tabelle erhalten wonky, wenn Sie aus dem Belegfluss. Die meisten javascript-basiert sticky header plugins tatsächlich erstellen Sie eine zweite Tabelle enthält nur die header-Zeile, die fixiert ist auf die Seite, während die ursprüngliche Tabelle scrollt darunter. Eine ähnliche Lösung kann hier erforderlich.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist eine demo von einer möglichen Lösung, basierend auf meinen früheren Kommentar:
DEMO: Feste Spalte auf Bootstrap-Tabelle
Beachten, dass dies nicht wirklich getestet, oder sogar eine komplette Lösung für die Befestigung einer Spalte, sondern eher ein proof-of-concept für Sie auf zu bauen.
Hier ist der entsprechende markup. Dieses Beispiel verwendet eine gestreift, umrandet condensed Bootstrap Tabelle
Und die erforderlichen jQuery:
und die benötigten CSS:
Hier ist ein fiddle mit einer demo, in der meine Lösung für das gleiche problem. Sie können beheben Sie alle Spalten, die Sie wollen. Fügen Sie einfach die Klasse "fixed-" Spalten " auf den Tisch und "fixed-Spalte" auf der th-und td, die Sie wollen, halten Sie fest. Dann rufen Sie responsiveTables.init() auf, um den rest zu tun. Ich entschied mich zu ändern, die id ' s auf der ursprünglichen Tabelle, um es kompatibel mit JSF-events.
Hier ist der HTML:
Hier ist das Javascript:
Und CSS: