Lignes de défilement Twitter Bootstrap et en-tête fixe

Question

Quelqu'un sait-il comment faire un tableau avec une ligne d'en-tête et défilement de lignes de corps? Je suis en utilisant twitter bootstrap si ce qui compte.

Ceci est un exemple de ce que je suis en train de créer

http://www.siteexperts.com/tips/html/ts04/page1.asp

Tous les exemples que j'ai vu le diviser en deux tableaux distincts. Je me demandais si quelqu'un a une solution plus élégante.

Twitter bootstrap aussi ajuste automatiquement la taille de colonne basée sur le contenu c'est donc une autre raison pour laquelle je voudrais le garder dans un tableau

Answer 1

Empilez deux bootstrap tables, une pour les colonnes, les autres pour le contenu. Pas de plugins, juste pur bootstrap (et qui n'est pas un bs, haha!)

  <table class="table" style="table-layout:fixed">
        <thead>
            <tr>
                <th>Col1</th>
                ...
            </tr>
        </thead>
  </table>
  <div style="overflow-y:auto;">
    <table class="table table-condensed" style="table-layout:fixed">
        <tbody>
            <tr>
                <td>data</td>
                ...
            </tr>
        </tbody>
    </table>
 </div>

Démo JSFiddle

Le contenu de la table div besoins en overflow-y:auto, pour vertical des barres de défilement. A utiliser table-layout:fixed, sinon, les colonnes ne soient pas alignés. Aussi, a dû mettre le tout dans un bootstrap panneau pour éliminer l'espace entre les tables.

N'ai pas testé avec des largeurs de colonne personnalisées, mais à condition de garder les largeurs de cohérence entre les tables, il devrait fonctionner.

Answer 2

Voici un plugin jQuery qui fait exactement cela: http://fixedheadertable.com/

Utilisation:

$('selector').fixedHeaderTable({ fixedColumn: 1 });

Définir l' fixedColumn option si vous voulez un nombre de colonnes à être également fixée pour le défilement horizontal.

EDIT: Cet exemple http://www.datatables.net/examples/basic_init/scroll_y.html est beaucoup mieux, à mon avis, bien qu'avec des tables de données, vous aurez besoin d'obtenir une meilleure compréhension de la façon dont cela fonctionne en général.

EDIT2: Pour Bootstrap pour travailler avec des tables de données, vous devez suivre les instructions ici: http://datatables.net/blog/Twitter_Bootstrap_2 (j'ai testé et ça marche)- Pour Bootstrap 3 il y a une discussion ici: http://datatables.net/forums/discussion/comment/53462 - (je n'ai pas testé)

Answer 3

Question intéressante, j'ai essayé de le faire en faisant simplement une rangée de positions fixes, mais cette voie semble être bien meilleure. Source en bas.

css

 thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; width:80px; }
td { height:50px; width:80px; background:blue; margin:0px; cell-spacing:0px;}
 

html

 <table>
    <thead>
        <tr><th>hey</th><th>ho</th></tr>
    </thead>
    <tbody>
        <tr><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td></tr>
</tbody>
 

http://www.imaputz.com/cssStuff/bigFourVersion.html