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?
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?
Odpowiedzi:
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;
}
overflow-x: auto
niestandardowego CSS
załatwia sprawę w przypadku większych układów wyświetlania.
border: 1px solid #dddddd;
.table-responsive td, .table-responsive th { white-space:nowrap; }
aby upewnić się, że komórki nie zmniejszają się automatycznie i dodawać podziały wierszy.
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:
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”):
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.