Gestion réactive des tables dans Twitter Bootstrap

84

Lorsque la largeur d'une table dépasse la largeur de la travée, comme cette page: http://jsfiddle.net/rcHdC/

Vous verrez que le contenu de la table est en dehors du span.

Quelle serait la meilleure méthode pour répondre à ce cas?

html twitter-bootstrap css Ryan
la source
Qu'aimeriez-vous qu'il se passe?
cimmanon

Réponses:

153

Bootstrap 3 a maintenant des tables responsives prêtes à l'emploi. Hourra! :)

Vous pouvez le vérifier ici: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Ajoutez un <div class="table-responsive">entourage à votre table et vous devriez être prêt à partir:

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

Pour le faire fonctionner sur toutes les mises en page, vous pouvez le faire:

.table-responsive
{
    overflow-x: auto;
}
Leniel Maccaferri
la source
7
Mais il ne l'applique qu'aux petits appareils (moins de 768px): S Source: getbootstrap.com/css/#tables-responsive
VSP
1
Pour l'activer sur toutes les mises en page de taille, vous pouvez simplement supprimer les styles réactifs du bloc 768 dans le fichier foundation_and_overrides.css.scss. Quelque chose comme `` .table-responsive {width: 100%; overflow-y: caché; overflow-x: faire défiler; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touchez; } `` ``
genkilabs
3
@ ase69s vérifie ma réponse mise à jour. Tout à l'heure, j'en avais besoin sur une table avec beaucoup de colonnes. L'ajout overflow-x: autod'un CSSfichier personnalisé fait l'affaire pour des mises en page d'affichage plus grandes.
Leniel Maccaferri
Vous pouvez également ajouter la bordure dans cette définition de syle, pour plus de cohérence:border: 1px solid #dddddd;
ptim
2
Vous voudrez peut-être également en ajouter .table-responsive td, .table-responsive th { white-space:nowrap; }pour vous assurer que les cellules ne se réduisent pas automatiquement et n'ajoutent pas de sauts de ligne.
rybo111
18

Il existe de nombreuses choses que vous pouvez faire lorsque vous gérez des tables réactives.

J'aime personnellement cette approche de Chris Coyier:

Vous pouvez trouver de nombreuses autres alternatives ici:

Si vous pouvez tirer parti de Bootstrap et obtenir quelque chose rapidement, vous pouvez simplement utiliser les noms de classe ".hidden-phone" et ".hidden-tablet" pour masquer certaines lignes, mais cette approche pourrait être la meilleure dans de nombreux cas. Plus d'informations (voir "Classes d'utilitaires réactifs"):

Luis Evrythng
la source
5
+1 pour le lien Coyer. J'ai utilisé cela avec beaucoup de succès dans le passé.
Fetchez la vache
Oui, la solution de Chris Coyer est très soignée. Beaucoup plus agréable que celui fourni par bootstrap ou zurbfoundation (ils ajoutent simplement un défilement horizontal).
Adrien Be le
À partir de maintenant, janvier 2016, le contenu réactif de Coyier et d'autres a entre 5 et 6 ans, avant que tout le monde ne commence à utiliser Twitter Bootstrap.
Andrew Koper
1

Si vous utilisez Bootstrap 3 et Less, vous pouvez appliquer les tableaux réactifs à toutes les résolutions en mettant à jour le fichier:

tables.less

ou écraser cette partie:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Avec:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Notez comment j'ai changé la valeur de la première ligne @ screen-XX.

Je sais que rendre toutes les tables réactives peut ne pas sembler très bonne, mais j'ai trouvé extrêmement utile de l'activer jusqu'à LG sur de grandes tables (beaucoup de colonnes).

J'espère que ça aide quelqu'un.

Mauricio
la source