Les tables réactives Bootstrap 4 ne prendront pas 100% de largeur
Je suis en train de créer une application Web à l'aide de Bootstrap 4 et de rencontrer des problèmes étranges. Je souhaite utiliser la classe Bootstrap de type table-responsive pour permettre le défilement horizontal des tables sur des périphériques mobiles. Sur les appareils de bureau, la table devrait occuper 100% de la largeur de la DIV contenant.
Dès que j'applique la classe .table-responsive à ma table, celle-ci se rétrécit horizontalement et n'occupe 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, la table est elle-même 100% large, mais les éléments enfants (TBODY, TR, etc.) sont toujours étroits.
Ce qui suit ne fonctionnera pas. Cela cause un autre problème. Il fera maintenant la largeur à 100% mais il ne réagira pas sur les plus petits appareils:
.table-responsive {
display: table;
}
Toutes ces réponses ont introduit un autre problème en recommandant display: table;. La seule solution à l'heure actuelle est de l'utiliser comme un wrapper:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Cette solution a fonctionné pour moi:
ajoutez simplement une autre classe dans votre élément de table: w-100 d-block d-md-table
il serait donc: <table class="table table-responsive w-100 d-block d-md-table">
pour bootstrap 4 w-100 définissez la largeur sur 100% d-block (display: block) et d-md-table (display: table on min-width: 576px)
Si vous utilisez la version 4.1, et en fonction de leur documentation, n'affectez pas directement .table-responsive à la table. La table doit être .table et si vous voulez qu'elle soit défilable horizontalement (responsive), ajoutez-la à l'intérieur d'un conteneur sensible à la table (un <div>, par exemple).
Les tableaux réactifs permettent de faire défiler les tableaux horizontalement avec facilité. Rendez n'importe quelle table sensible dans toutes les fenêtres en en enveloppant une table avec .table.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
ce faisant, 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.
Pour une raison quelconque, la table responsive en particulier ne se comporte pas comme il se doit. Vous pouvez le corriger en vous débarrassant de display:block;
.table-responsive {
display: table;
}
Je peux déposer un rapport de bogue.
Modifier:
La solution conforme à la v4 du framework consiste à définir le point d'arrêt approprié. Plutôt que d'utiliser .table-responsive, vous devriez pouvoir utiliser .table-responsive-sm (pour répondre simplement sur de petits appareils)
Vous pouvez utiliser n’importe quel des points de terminaison disponibles: table-responsive {-sm | -md | -lg | -xl}
En prenant en considération les autres réponses, je voudrais faire quelque chose comme ça, merci!
.table-responsive {
@include media-breakpoint-up(md) {
display: table;
}
}
En effet, la classe .table-responsive ajoute la propriétédisplay: blockà votre élément, ce qui la remplace par le précédentdisplay: table.
Remplacez cette propriété pardisplay: tabledans votre propre feuille de style
.table-responsive {
display: table;
}
Remarque: assurez-vous que ce style est exécuté après votre code d'amorçage pour pouvoir être remplacé.
Cela est dû au fait que la classe table-responsive a attribué à la table une propriété de display:block, ce qui est étrange car cela écrase les classes table originales display:table et explique pourquoi la table est réduite lorsque vous ajoutez table-responsive.
Il est fort probable que bootstrap 4 soit encore en développement. Vous pouvez remplacer cette propriété par votre propre classe qui définit display:table sans affecter la réactivité de la table.
par exemple.
.table-responsive-fix{
display:table;
}
Aucune de ces réponses ne fonctionne (date aujourd'hui 9 décembre 2018). La bonne solution consiste à ajouter .table-responsive-sm à votre table:
<table class='table table-responsive-sm'>
[Your table]
</table>
Cela applique l'aspect réactivité uniquement à la vue SM (mobile). Ainsi, dans la vue mobile, vous obtenez le défilement comme vous le souhaitez et dans les vues plus grandes, le tableau ne répond pas et affiche ainsi toute la largeur souhaitée.
Docs: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
Créez des tables sensibles en encapsulant toute table .table avec {-sm | -md | -lg | -xl}, faisant en sorte que la table défile horizontalement à chaque point d'arrêt de largeur maximale de 576 pixels, 768 pixels, 992px et 1120px, respectivement.
encapsulez simplement la table avec .table-responsive {-sm | -md | -lg | -xl}
par exemple
<div class="table-responsive-md">
<table class="table">
</table>
</div>
J'ai constaté que l'utilisation de la classe recommandée pour les tables dans un wrapper provoque toujours un rétrécissement (étonnant) horizontal des tables réactives:
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
La solution pour moi était de créer les points d'arrêt et les classes de supports 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 grandes et les plus grandes par Bootstrap. Lorsque la classe table-lg est appliquée à l'élément table, la largeur de la table est également définie sur 100% pour les grandes et les grandes, mais sur 992px pour les moyennes et les petites. Les classes table-xs, table-sm, table-md et table-xl fonctionnent de la même manière.
Pour Bootstrap 4.x, utilisez les utilitaires d'affichage:
w-100 d-print-block d-print-table
sage:
<table class="table w-100 d-print-block d-print-table">