Défilement horizontal de la table avec Twitter bootstrap

J'ai une page avec une table qui peut avoir un nombre différent de colonnes. C'est la comparaison des produits de la page et l'utilisateur peut sélectionner jusqu'à 10 produits pour les comparer.

Je suis en utilisant twitter bootstrap v2.1 avec disposition fixe + réactif.
Comment puis-je faire le tableau défilant horizontalement au sein du div conteneur?
Idéalement, je voudrais aussi avoir la première colonne, toujours visibles (congelés).

Est-il possible?

InformationsquelleAutor Michael D. | 2012-09-05
  1. 12

    En fait j'ai résolu le principal problème de cette façon:

    <div class="row">
    <div class="span12" style="overflow: auto">
        <table class="table table-bordered">
            <thead>
                <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th>
                <th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th><th>Column 10</th>
            </thead>
            <tbody>
                <tr>
                    <td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td>
                    <td>Row1 Column6</td><td>Row1 Column7</td><td>Row1 Column8</td><td>Row1 Column9</td><td>Row1 Column10</td>
                </tr>
                <tr>
                    <td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td>    <td>Row2 Column4</td><td>Row2 Column5</td>
                    <td>Row2 Column6</td><td>Row2 Column7</td><td>Row2 Column8</td><td>Row2 Column9</td><td>Row2 Column10</td>
                </tr>
                <tr>
                    <td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td>
                    <td>Row3 Column6</td><td>Row3 Column7</td><td>Row3 Column8</td><td>Row3 Column9</td><td>Row3 Column10</td>
                </tr>
                <tr>
                    <td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td>
                    <td>Row4 Column6</td><td>Row4 Column7</td><td>Row4 Column8</td><td>Row4 Column9</td><td>Row4 Column10</td>
                </tr>
                <tr>
                    <td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td>
                    <td>Row5 Column6</td><td>Row5 Column7</td><td>Row5 Column8</td><td>Row5 Column9</td><td>Row5 Column10</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

    Donc si quelqu'un sait comment figer la première colonne, je voudrais vraiment l'apprécier

    • Pour corriger un problème sur le côté droit de la table, ajoutez ce style: "max-width: none;" à la balise table.
    InformationsquelleAutor Michael D.
  2. 1

    Pour les colonnes et les barres de défilement pour datatables

    Obtenir le FixedHeader plug-in
    et
    puis

    $(document).ready( function () {
    var oTable = $('#example').dataTable( {
        "sScrollX":       "100%",
        "sScrollXInner":  "150%",
        "sScrollY":       "250px",
        "bScrollCollapse": true,
        "bPaginate":       false
    } );
     new FixedColumns( oTable, {
         "iColumns": 2
     } );
} );

    référence

    InformationsquelleAutor Angelin Nadar