Bootstrap 3 table - table-sensibles ne fonctionne pas

Je suis en utilisant bootstrap 3 pour un projet de site web. Je suis en train de créer une page avec un réactif de table, de sorte que j'aurais la barre de défilement lorsque le tableau est trop grand. J'ai fait un test comme ceci:

<div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

Maintenant, le problème est qu'il ne pas ajouter de la barre de défilement, il ne fait que se développe le site web de la largeur de la table.

Voir une capture d'écran ici:

Je l'ai vu sur plusieurs autres sites web, de sorte quelque chose que je fais...c'est mal.

Alors, voulez-vous qu'il y ait une barre de défilement horizontale pour la table?
Votre utilisation du tableau sensible est correct et qu'il devrait travailler. BTW, il est complètement inutile d'utiliser col-12 (pas une classe de bootstrap), co-sm-12, col-lg-12 et la ligne. Pas de grille de classes sont nécessaires sur toute la largeur des éléments, sauf si vous utilisez une couleur de fond sur eux.
Avez-vous comprendre cela finalement? Je trouve que je vais avoir le même problème lors de l'utilisation de display:table comme un récipient pour la table de répondre.
avez-vous inclus les moins et sass fichier de bootstrap

OriginalL'auteur Daniel Olsen | 2014-10-15

41

Remplacer votre table-réactif avec cette
```
<div class='table-responsive'> -> <div style="overflow-x:auto;">
```
OriginalL'auteur Savan Kachhiya Patel
14

Assurez-vous de définir votre tableau d'affichage bloc
```
.table {
   display: block !important;
}
```
OriginalL'auteur Hamza AVvan
4

bootstrap de table du responsive fonctionne bien dans les environnements sandbox, mais il est buggé sur les milieux de vie. La raison pour le bug, c'est que bootstrap donne le tableau sensible de styles de width: 100% et overflow-y: hidden. Ces deux styles ne jouent pas bien ensemble. Débordement de cacher fonctionne mieux quand il ya un fixe ou max-width. J'ai donné de la table de réaction d'un max-width: 270px; pour les appareils mobiles, et que la correction du bug.

Cela a résolu mon problème. Meilleure réponse!

OriginalL'auteur Nate Levine

Vous êtes le code est très bien. Je viens de mettre en place un violon ici.

Y travaille!

J'ai littéralement copié et collé votre code. Êtes-vous sûr que vos liens à l'Amorçage du fichier Javascript et CSS fichier de travail?

<div class="row">
 <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->

Il a bien fonctionné pour moi aussi. Je pense aussi qu'il pourrait être le bootstrap fichier js lien.
il y a autre chose de mal, sans doute un manque div quelque part sur la page. .table-réactif, c'est seulement le css, rien à voir avec js
Je suppose qu'il y a autre chose qui le bloque. Cause je peux mettre en place un violon, et il fonctionne très bien, mais sur MA page, sa ne fonctionne pas du tout...
Une balise fieldset faisait des ravages pour moi
Le jsfiddle lien est rompu.

OriginalL'auteur ben.kaminski

2

J'ai eu ce problème et trouvé qu'il a travaillé pour donner au tableau un ensemble de largeur en px, ou de mettre la table pour display: block.

OriginalL'auteur Andrew Dant

Je v le faire.

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table style="table-layout: fixed; width: 100%;">
                           <tr>
                               <td>


                                  //SCROLL
                                  <div style="width: 100%; overflow-x: auto;">

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table class="table table-hover">

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

Vous recevrez au xs-écran (exemple à partir de mon application):

Bootstrap 3 table - table-sensibles ne fonctionne pas

OriginalL'auteur Evgeniy Miroshnichenko

0

Vous pouvez utiliser FooTable. C'est un plugin jQuery qui vous permet de redimensionner et de redistribuer les données dans vos tables pour satisfaire le mieux à votre point d'arrêt.

Liens vers des tiers, des plugins et des applications sont généralement mal vu par la communauté. DONC, est plus orienté vers l'obtention de l'aide du débogage de code de l'échantillon.

OriginalL'auteur fatihdemir
0

Pour moi, c'était le 'min-width' valeur dans l'élément de corps de rupture de la réactivité de cette classe.

OriginalL'auteur tahaerden
-1

Essayer cette

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

et déplacer la table de classe sensibles dans
<div class="col-12 col-sm-12 col-lg-12">

exemple

<div class="col-12 col-sm-12 col-lg-12 table-responsive">

ce 100%, mais si ne fonctionnent pas déplacer la classe de la table de répondre plus Tôt Div couche,
Dans ce cas,
<div class="col-12 col-sm-12 col-lg-12">
doit être supprimé.

vous ne pouvez pas mélanger le style de classes avec les classes de grille. Vous définissez vous-même pour les problèmes potentiels dans le futur qui sera difficile à déboguer

OriginalL'auteur mohammad reza Batooei

Vous devez vous connecter pour publier un commentaire.