web-dev-qa-db-fra.com

Gestion de la table réactive sur Twitter Bootstrap

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

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

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

csshtml5twitter-bootstrapcss3
83
Ryan

Bootstrap a maintenant des tables responsive 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"> 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;
}
152
Leniel Maccaferri

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 fooTable

21
Gfw

Il y a beaucoup de choses différentes que vous pouvez faire quand vous travaillez avec des tables responsive.

Personnellement, j'aime cette approche de Chris Coyier:

Vous pouvez trouver beaucoup d'autres alternatives ici:

Si vous pouvez exploiter 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 de nombreuses cas. Plus d'infos (voir "Classes utilitaires réactives"):

18
Luis Evrythng

Si vous utilisez Bootstrap 3 et Moins, vous pouvez appliquer les tables réactives à toutes les résolutions en mettant à jour le fichier:

tables.less

ou écrasant 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 sensibles ne semble pas très bon, mais j’ai trouvé extrêmement utile d’activer ceci jusqu’à LG sur de grandes tables (beaucoup de colonnes).

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

1
Mauricio