web-dev-qa-db-fra.com

Bootstrap 3 responsive pour la table ne fonctionne pas

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

Ce bloc de code ne génère pas de table sensible dans Bootstrap. Aidez-moi, s'il vous plaît, à atteindre la table responsive à l’aide de bootstrap . Merci d’avance. 

twitter-bootstraptwitter-bootstrap-3
17
sulthana

Le tableau suivant ne fonctionne que <768px. 

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

Parce que bootstrap 3 a le code suivant

@media (max-width: 767px) {
    .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;
    }
}

Si vous voulez une table responsive pour display >768px, vous pouvez alors l'écraser dans votre css sans requête multimédia, comme ceci

.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;
}
38
Fizer Khan

Je sais que la documentation indique ce que j’ai demandé .table-responsive ne fonctionne pas dans div au-dessus du tableau mais que l’ajouter à la classe table fonctionne ... Procédez comme suit et votre problème devrait être résolu.

Ne fonctionne pas:

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

Travaux:

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

DEMO

3
Shina

La réponse de Fizer Khan sur cette page est correcte. Cependant, pour que vous puissiez l'appliquer uniquement lorsque vous le souhaitez absolument dans les périphériques> 768 pixels, je vous recommande de créer un style CSS personnalisé dans votre propre fichier CSS, appelé par exemple:

.table-responsive-force {
    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;
}

Ensuite, vous pouvez simplement l’utiliser chaque fois que vous souhaitez redéfinir le comportement par défaut de Bootstrap.

1
Henry Weber

Je ne vois pas pourquoi ce qui suit ne fonctionnerait pas ... Assurez-vous de ne pas définir de largeur ou de hauteur ... affichez le code HTML complet.

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

[bootstrap3]

1
Omar

Vous n'avez probablement pas défini la largeur sur div (ou section) externe (habillage). L'ajout de 'width: 100%' à l'élément externe pourrait résoudre le problème.

0
Bosko