Gestion de la table réactive dans Twitter Bootstrap

Question

Lorsque la largeur d’une table dépasse celle de l’intervalle, comme sur cette page: http://jsfiddle.net/rcHdC/

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

Quelle serait la meilleure méthode pour traiter ce cas?

Answer 1

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

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

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

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

Pour que cela fonctionne sur toutes les dispositions, vous pouvez le faire:

 .table-responsive
{
    overflow-x: auto;
}
 

Answer 2

Une option disponible est fooTable. Fonctionne très bien sur un site Web Responsive et vous permet de définir plusieurs points d'arrêt ... Lien de fooTable

Answer 3

Il y a beaucoup de choses différentes que vous pouvez faire lorsque vous traitez avec responsive tables.

Personnellement, j'aime cette approche par Chris Coyier:

• http://css-tricks.com/responsive-data-tables/

Vous pouvez trouver de nombreuses autres alternatives ici:

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

Si vous pouvez tirer parti de Bootstrap et de trouver quelque chose rapidement, vous pouvez simplement utiliser les noms de classe ".caché-phone" et ".caché-tablette" pour cacher quelques lignes, mais cette approche pourrait être le meilleur dans de nombreux cas. Plus d'infos (voir "Réactif de l'utilitaire de classes"):

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

Answer 4

Si vous êtes en utilisant Bootstrap 3 et Moins on pourrait appliquer le responsive tables pour toutes les résolutions par updatingthe fichier:

tables.less

ou à l'écrasement de la présente 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 la façon dont j'ai modifié la première ligne @screen-XX valeur.

Je sais faire toutes les tables réactif peut ne pas sembler bonne, mais je l'ai trouvé très utile d'avoir ce permis à LG sur de grandes tables (beaucoup de colonnes).

Espérons que cela aide quelqu'un.