web-dev-qa-db-fra.com

Table de défilement horizontale dans Bootstrap / CSS

Comment puis-je faire en sorte qu'une table à l'intérieur d'un conteneur avec sa propre largeur ne suive pas la largeur du conteneur mais conserve plutôt la largeur de la table lorsqu'elle ne se trouve pas à l'intérieur du conteneur. J'ai une table très large que je veux insérer dans un conteneur col-md-9 et il affiche mauvais car il serre la table pour l'adapter au conteneur. J'ai essayé min-width _ pour la table, mais il n’est pas flexible car l’ajout de colonnes supplémentaires à ma table le réduira à nouveau. Serait-il possible de rendre la largeur de la table automatique tout en ne suivant pas la largeur du parent?

<div class="col-md-9" style="overflow-x: auto">
    <table class="table table-bordered" style="width:auto">
    <tbody>
        <tr>
          .... contents
        </tr>
    <tbody>
    </table>
</div>
htmlcsstwitter-bootstrap
38
Randal Cunanan

Voici une possibilité pour vous si vous utilisez Bootstrap 3

vue en direct: http://fiddle.jshell.net/panchroma/vPH8N/10/show/

modifier la vue: http://jsfiddle.net/panchroma/vPH8N/

J'utilise le code de table sensible de http://getbootstrap.com/css/#tables-responsive

c'est à dire:

<div class="table-responsive">
<table class="table">
...
</table>
</div>
93
David Taiaroa

Vous pouvez également rechercher bootstrap le plugin datatable ainsi que le problème ci-dessus.

Il aura une grande fonctionnalité de table de colonnes défilant avec beaucoup d’autres options

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

pour plus d'informations avec exemple s'il vous plaît vérifier ceci lien

15
Mahesh J

@Cwan. Vous avez raison. La table va à la largeur totale (beaucoup trop large). Pas une bonne solution. Mieux vaut faire ceci:

css:

.scrollme {
    overflow-y: auto;
}

html:

<div class="scrollme">                        
  <table class="table table-responsive"> ...
  </table>
</div>
8
Sonobor