Responsywna obsługa tabel w Twitter Bootstrap

84

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?

html twitter-bootstrap css

— Ryan
źródło

Co byś chciał?

— cimmanon

153

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

— Leniel Maccaferri
źródło

7

Ale dotyczy tylko małych urządzeń (poniżej 768 pikseli

— VSP

1

Aby włączyć to we wszystkich układach rozmiarów, możesz po prostu upuścić responsywne style z bloku 768 w pliku Foundation_and_overrides.css.scss. Coś w rodzaju `` .table-responsive {width: 100%; overflow-y: ukryty; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: dotyk; } ``

— genkilabs

3

@ ase69s sprawdź moją zaktualizowaną odpowiedź. Właśnie teraz potrzebowałem tego na stole z wieloma kolumnami. Dodanie pliku overflow-x: autoniestandardowego CSSzałatwia sprawę w przypadku większych układów wyświetlania.

— Leniel Maccaferri

Możesz również border: 1px solid #dddddd;

— chcieć

2

Może również chcieć dodać, .table-responsive td, .table-responsive th { white-space:nowrap; }aby upewnić się, że komórki nie zmniejszają się automatycznie i dodawać podziały wierszy.

— rybo111

21

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

— Gfw
źródło

FooTable jest teraz zbudowany do pracy z Twitter Bootstrap po wyjęciu z pudełka.

— shasi kanth

18

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:

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

— Luis Evrythng
źródło

5

+1 dla Coyer Link. Używałem tego w przeszłości ze świetnym efektem.

— Fetchez la vache

Tak, rozwiązanie Chrisa Coyera jest bardzo zgrabne. Znacznie ładniejszy niż ten dostarczany przez bootstrap lub zurbfoundation (po prostu dodają przewijanie w poziomie).

— Adrien Be

Na dzień dzisiejszy, styczeń 2016, responsywne rzeczy Coyiera i innych mają 5-6 lat, zanim wszyscy zaczęli używać Twitter Bootstrap.

— Andrew Koper

1

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.

— Mauricio
źródło