Bootstrap Horizontale De Défilement De La Table

J'ai été aux prises avec ce pour un certain temps maintenant. J'ai une table dans le bootstrap que si il arrive à large je voudrais faire de défilement afin qu'ils puissent au moins faire défiler pour voir les informations.

Mon code html est assez simple il suffit d'un tableau à l'intérieur d'une boîte

<div class='box'>
  <div class='box-header'>
    <h4>Title</h4>
  </div>
  <div class='box-content'>
    <table>
    <!--Table Stuff-->
    </table>
  </div>
</div>

et j'ai essaye l'habitude de fixer un width et puis un overflow-x:scroll; comme

table{
 width:100px;
 max-width:100px;
 overflow-x:scroll;
}

mais rien ne semble fonctionner.

J'ai un jsFiddle mettre en place ici. http://jsfiddle.net/AHyuF/3/

Toute aide serait beaucoup, beaucoup apprécié!

Ne sais pas si vous avez résolu ce problème... j'ai eu le même problème et trouvé la solution ici stackoverflow.com/questions/12272981/...

OriginalL'auteur zazvorniki | 2014-03-21

  1. 6

    Mettre la largeur maximale de dépassement sur la tableScroll div (conteneur) à la place...

    .tableScroll{
    width:200px;
    max-width:200px;
    overflow-x:scroll;
}
    C'est sur le contenant bien...et j'ai quelques pagination arrive que ce sera ainsi. Je veux juste la table pour faire défiler et pas le contenant.
    Je suis venu avec la même réponse, Voici une mise à jour de jsfiddle: jsfiddle.net/AHyuF/2
    J'ai mis à jour mon violon pour montrer ce que je ne veux pas de défilement
    Je ne pense pas que dépassement de travaux sur les tables. Dépassement de capacité ne fonctionne que sur les éléments de niveau bloc. Les éléments de la Table ne sont pas les éléments de bloc.
    Alors que serait ma réponse...display:block;

    OriginalL'auteur Zim

  2. 6

    ou bien vous avez juste à ajouter une classe "table-responsive" à la table div

     <div class = "table-responsive">
 </div>

    Il fera table de défilement.

    OriginalL'auteur Bilal Inamdar

  3. 2

    Enfin trouvé une solution à la table de défilement horizontal pour Bootstrap 2.3.2, que j'aimerais partager. Ne peux pas prendre le crédit pour ce bien; qui va à James Chambers, auteur de "Bootstrapping" MVC.

    Juste ajouter ceci à votre fichier CSS spécifique.

    .table-responsive 
{   
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;   
    overflow-y: hidden;     
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #000000; 
}

    OriginalL'auteur user1887686

  4. 1

    S'il vous plaît mettez style overflow-x: scroll; pour le parent de l'élément du tableau, dans ce cas <div class='box-content'>.

    Voici le jsFiddle lien : http://jsfiddle.net/AHyuF/38/

    veuillez trouver le lien : http://jsfiddle.net/AHyuF/38/

    OriginalL'auteur Deepak Bansode

  5. 0

    Garder la largeur de la table comme 

    table{
 width:200px;
 max-width:200px;
 overflow-x:scroll;
}

    et ajouter un peu plus à la table div class .la boîte de contenu

    .box-content {overflow-x:auto;}

    il va travailler.
    S'il vous plaît laissez-moi savoir si cela fonctionne.

    OriginalL'auteur Bilal Inamdar