Bootstrap panneau avec sensible table à l'intérieur

Ici est un JS Bin lien: http://jsbin.com/qiziyupo/4/edit?output

De la réactivité de la table de ne pas ajuster le panneau. Comment puis-je résoudre ce problème?

EDIT: je suis à la recherche d'une solution où la réactivité de la table de redimensionner pour s'adapter à l'intérieur du panneau, sans avoir à faire le panneau plus grand.

OriginalL'auteur Zack Gao | 2014-04-09

  1. 16

    La .table-responsive classe est uniquement conçu pour être réactif sur des appareils mobiles...

    À partir du Bootstrap 3.1.1 documentation...

    Créer responsive tables en enveloppant le tout .table en .tableau sensible pour les faire défiler horizontalement jusqu'à de petits appareils (sous 768px). Lors de la visualisation sur quelque chose de plus grand que 768px de large, vous ne verrez pas de différence dans ces tableaux

    Mais vous pouvez ajouter la classe dans votre css sans les médias de requête et d'obtenir la fonctionnalité à toute fenêtre d'affichage.

    Mais notez que cela ne recule pas devant la table, il ne donne qu'une barre de défilement horizontale...

    Ci-dessous est la .table-responsive classes de Bootstrap sans la requête de support à le restreindre à 768px et ci-dessous.

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

.table-responsive>.table { 
    margin-bottom: 0;
}

.table-responsive>.table>thead>tr>th, 
.table-responsive>.table>tbody>tr>th, 
.table-responsive>.table>tfoot>tr>th, 
.table-responsive>.table>thead>tr>td, 
.table-responsive>.table>tbody>tr>td, 
.table-responsive>.table>tfoot>tr>td {
    white-space: nowrap;
}

    Il y a un peu plus de règles CSS pour .table-bordered que je ne comprend pas...

    Cool. Fonctionne très bien aussi lorsque s'est effondré à l'étroit vue de l'unité. Fonctionne même pour un tableau affiché dans bootbox dialogue qui est enveloppé dans des div.table de répondre. Seules les modifications ont été à l'utilisation de l'auto pour overflow-x et à supprimer la frontière - frontière est fourni par le dialogue. Je dirais aussi pour envelopper un tableau à l'intérieur d'un panneau en div.la ligne qui fait le tableau de flux de gauche à droite.
    Nice. Exactement ce que je cherchais. - Je renommer la classe "table-sensible" à "table-responsive-mesure" afin d'éviter des collisions avec la table d'origine sensible classe de Bootstrap.

    OriginalL'auteur Schmalzy

  2. 3
    <div class="panel-body" style="overflow:scroll">            
  <table class="table table-bordered">

    Viens d'écrire ce pour la table de défilement horizontal dans le panneau d'administration.

    J'ai mis à jour ton post d'inclure le code. Vous pouvez lire sur la mise en forme du code sur ce site stackoverflow.com/help/formatting

    OriginalL'auteur chetan

  3. 2

    Préférable de ne pas utiliser le panneau de corps, de Mettre la table à l'intérieur du panneau de la balise, ne pas utiliser de Panneau de Corps

    OriginalL'auteur Manjush

  4. 0

    Cela se produit parce Panneau a cette classe:

    .col-md-3 {
    width: 25%;
}

    que la force de sa largeur. L'enlever et tout sera ok 🙂

    Merci Luca, mais ce n'était pas tout à fait ce que je cherchais. J'ai édité ma question pour rendre les choses plus claires.
    Vous ne pouvez pas avoir ce que vous désirez, tout simplement parce que vous avez du contenu qui nécessite un espace plus grand que la largeur du Panneau. Comme vous le voyez, vous n'avez pas de "phrases" qui peuvent être enveloppement à l'intérieur des cellules de tableau, mais seulement des mots simples, qui remplissent un espace spécifique. Si vous ne pouvez pas agrandir votre groupe, les seules solutions sont de réduire de rembourrage sur les cellules d'un tableau et la taille de police de chaque texte... Vous serez capable de récupérer de l'espace.....

    OriginalL'auteur Luca Detomi

  5. 0

    À l'aide de conteneurs a également un impact sur elle. Si Votre mise en page ne sont pas fixes de mise en page, l'utilisation container-fluid, et il n'y aura aucun problème avec la réactivité de .table classe.

    OriginalL'auteur Khasan 24-7