Les tables réactives Bootstrap 4 ne prendront pas 100% de largeur

97

Je crée une application Web en utilisant Bootstrap 4 et je rencontre des problèmes étranges. Je souhaite utiliser la classe sensible aux tables de Bootstrap pour permettre le défilement horizontal des tables sur les appareils mobiles. Sur les appareils de bureau, la table doit occuper 100% de la largeur du DIV contenant.

Dès que j'applique la classe .table-responsive à ma table, la table se rétrécit horizontalement et ne prend plus 100% de la largeur. Des idées?

Voici mon balisage:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

Si j'applique une largeur de 100% à la classe .table-responsive, cela rend la table elle-même une largeur de 100% mais les éléments enfants (TBODY, TR, etc.) sont toujours étroits.

css bootstrap-4 code-mange-sommeil
la source

Réponses:

158

Ce qui suit NE FONCTIONNE PAS. Cela cause un autre problème. Il fera maintenant la largeur de 100% mais il ne sera pas réactif sur les petits appareils:

.table-responsive {
    display: table;
}

Toutes ces réponses ont introduit un autre problème en recommandant display: table;. La seule solution pour le moment est de l'utiliser comme wrapper:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
John FatBoy Doeeee Rolla
la source
2
Fidgeted avec cela pour toujours - trop tôt pour penser simplement à l'envelopper. Votre l'homme
JSF
L'utilisation de la table-responsiveclasse comme wrapper rappelle Bootstrap 3 ...? Heureux qu'il y ait une solution pour l'instant! Bootstrap 4 Alpha ;-)
Steve Meisner
Ne pas voir ce travail avec la version bêta. Il semble que vous deviez supprimer le div et ajouter "table-responsive" le long de "table". Comme ça .. <table class = "table table-responsive">
Winnemucca
ce problème n'a toujours pas été résolu dans bootstrap 4, bien qu'une partie de soit d'accord avec votre réponse, les instructions de migration de bootstrap 3 vers 4 indiquent: "les tables réactives ne nécessitent plus d'élément d'encapsulation. Au lieu de cela, mettez simplement le .table-responsive directement sur la <table>. "... trouvé ici: getbootstrap.com/docs/4.0/migration/#tables
Marin
Fonctionne parfaitement pour moi sur la version 4.3.1! Merci
Ibrahim Isa
38

Cette solution a fonctionné pour moi:

ajoutez simplement une autre classe dans votre élément de table: w-100 d-block d-md-table

ce serait donc: <table class="table table-responsive w-100 d-block d-md-table">

pour bootstrap 4, w-100définissez la largeur sur 100% d-block(affichage: bloc) et d-md-table(affichage: tableau sur largeur min: 576px)

Documents d'affichage Bootstrap 4

Faytraneozter
la source
2
Fonctionne pour Bootstrap4 Beta! La clé était le w-100. Merci.
ObjectiveTC
Cette solution n'a-t-elle pas le même effet que de simplement faire <table class="table table-responsive-md">?
JamesWilson
21

Si vous utilisez V4.1, et selon leurs documents, n'attribuez pas .table-responsive directement à la table. Le tableau doit être .table et si vous voulez qu'il puisse faire défiler horizontalement (réactif), ajoutez-le dans un conteneur .table-responsive (a <div>, par exemple).

Les tableaux réactifs permettent de faire défiler facilement les tableaux horizontalement. Rendez n'importe quel tableau réactif dans toutes les fenêtres en enveloppant un .table avec .table-responsive.

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

pour ce faire, aucun css supplémentaire n'est nécessaire.

Dans le code de l'OP, .table-responsive peut être utilisé avec le .col-md-12 à l'extérieur.

Marcelo Myara
la source
3
C'est censé être la bonne réponse depuis la version stable de bootstrap. Thx
Peter
2
Voilà la réponse. Merci
Gjaa
1
Bonne réponse!
Andrew Schultz
6

Pour une raison quelconque, la table responsive en particulier ne se comporte pas comme elle le devrait. Vous pouvez le patcher en vous débarrassant dedisplay:block;

.table-responsive {
    display: table;
}

Je peux déposer un rapport de bogue.

Éditer:

C'est un bug existant.

Serg Chernata
la source
5

Aucune de ces réponses ne fonctionne (date d'aujourd'hui 9 décembre 2018). La résolution correcte ici est d'ajouter .table-responsive-sm à votre table:

<table class='table table-responsive-sm'>
[Your table]
</table>

Ceci applique l'aspect réactivité uniquement à la vue SM (mobile). Ainsi, en vue mobile, vous obtenez le défilement comme vous le souhaitez et dans des vues plus grandes, le tableau n'est pas réactif et donc affiché en pleine largeur, comme vous le souhaitez.

Docs: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

SongBox
la source
2

La solution conforme à la v4 du framework est de définir le point d'arrêt approprié. Plutôt que d'utiliser .table-responsive, vous devriez pouvoir utiliser .table-responsive-sm (pour être juste réactif sur les petits appareils)

Vous pouvez utiliser n'importe lequel des points de terminaison disponibles: table-responsive {-sm | -md | -lg | -xl}

Rubén_ic
la source
1

C'est parce que la .table-responsiveclasse ajoute la propriété display: blockà votre élément, ce qui la change par rapport au précédent display: table.

Remplacer cette propriété display: tabledans votre propre feuille de style

.table-responsive {
    display: table;
}

Remarque: assurez-vous que ce style s'exécute après votre code d'amorçage pour qu'il soit remplacé.

Nikhil Nanjappa
la source
1

Cela est dû au fait que la table-responsiveclasse attribue à la table une propriété de display:block, ce qui est étrange car cela écrase les tableclasses d'origine display:tableet c'est pourquoi la table se réduit lorsque vous ajoutez table-responsive.

Il est fort probable que le bootstrap 4 soit toujours en développement. Vous êtes sûr de remplacer cette propriété par votre propre classe qui définit display:tableet cela n'affectera pas la réactivité de la table.

par exemple

.table-responsive-fix{
   display:table;
}
Callum
la source
1

En tenant compte des autres réponses, je ferais quelque chose comme ça, merci!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
Alexis
la source
1

Créez des tableaux réactifs en encapsulant n'importe quel .table avec .table-responsive {-sm | -md | -lg | -xl}, faisant défiler le tableau horizontalement à chaque point d'arrêt de largeur maximale (mais non compris) 576px, 768px, 992px et 1120px, respectivement.

enveloppez simplement la table avec .table-responsive {-sm | -md | -lg | -xl}

par exemple 

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

bootstrap 4 tableaux

iMezied
la source
0

J'ai trouvé que l'utilisation de la classe sensible aux tables recommandée dans un wrapper entraîne toujours (étonnamment) la réduction horizontale des tables réactives:

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

La solution pour moi était de créer les classes et points d'arrêt média suivants pour l'empêcher:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Ensuite, je peux ajouter la classe appropriée à mon élément de table. Par exemple:

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

Ici, le wrapper définit la largeur à 100% pour les grands et les plus grands par Bootstrap. Avec la classe table-lg appliquée à l'élément table, la largeur du tableau est également définie sur 100% pour les grands et les plus grands, mais sur 992px pour les moyens et les plus petits. Les classes table-xs, table-sm, table-md et table-xl fonctionnent de la même manière.

ScottyB
la source
0

Pour Bootstrap 4.x, utilisez les utilitaires d'affichage:

w-100 d-print-block d-print-table

Utilisation :

<table class="table w-100 d-print-block d-print-table">
Bora
la source
0

Il semble que l'élément "sr-only" et ses styles à l'intérieur du tableau soient à l'origine de ce bogue. Au moins, j'ai eu le même problème et après des mois à nous cogner la tête contre le mur, c'est ce dont nous avons déterminé la cause, même si je ne comprends toujours pas pourquoi. L'ajout des left:0styles "sr uniquement" a corrigé le problème.

Bryn Newell
la source