Responsywna obsługa tabel w Twitter Bootstrap

Gdy szerokość tabeli przekracza szerokość rozpiętości, na przykład ta strona: http://jsfiddle.net/rcHdC/

Zobaczysz, że zawartość tabeli jest poza span.

Jaka byłaby najlepsza metoda rozwiązania tego przypadku?

Bootstrap 3 ma teraz responsywne tabele po wyjęciu z pudełka. Brawo! :)

Możesz to sprawdzić tutaj: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Dodaj <div class="table-responsive">otoczenie stołu i powinieneś być gotowy:

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

Aby działał na wszystkich układach, możesz to zrobić:

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

Jedną z dostępnych opcji jest fooTable. Działa świetnie na responsywnej stronie internetowej i pozwala ustawić wiele punktów przerwania ... fooTable Link

W przypadku responsywnych tabel można zrobić wiele różnych rzeczy.

Osobiście podoba mi się takie podejście Chrisa Coyiera:

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

Możesz znaleźć wiele innych alternatyw tutaj:

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

Jeśli możesz wykorzystać Bootstrap i szybko uzyskać coś, możesz po prostu użyć nazw klas „.hidden-phone” i „.hidden-tablet”, aby ukryć niektóre wiersze, ale to podejście może być najlepsze w wielu przypadkach. Więcej informacji (zobacz „Responsywne klasy narzędzi”):

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

Jeśli używasz Bootstrap 3 i Less, możesz zastosować responsywne tabele do wszystkich rozdzielczości, aktualizując plik:

tables.less

lub nadpisując tę ​​część:

@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;
          }
        }
      }
    }
  }
}

Z:

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

Zwróć uwagę, jak zmieniłem wartość w pierwszej linii @ screen-XX.

Wiem, że reagowanie na wszystkie tabele może nie brzmieć tak dobrze, ale okazało się, że niezwykle przydatne jest włączenie tej funkcji do LG na dużych stołach (wiele kolumn).

Mam nadzieję, że to komuś pomoże.