Gdy szerokość stole przekraczają szerokość przęsła, podobnie jak tej strony: http://jsfiddle.net/rcHdC/Responsive tablica obsługi w Twitter Bootstrap
Będziesz zobaczyć zawartość tabeli jest poza span.
Jaka byłaby najlepsza metoda na zaspokojenie tej sprawy?
Jedna dostępna opcja to fooTable. Działa wspaniale w Responsive website i pozwala ustawić wiele punktów przerwania ... fooTable Link
[FooTable jest teraz gotowy do pracy z Bootstrap na Twitterze.] (Http://fooplugins.com/footable/demos/getting-started.htm#setup) –
Jest wiele różnych rzeczy, które możesz zrobić, gdy zajmujesz się tabelami responsywnymi.
Osobiście lubię tego podejścia Chrisa Coyier:
Można 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ć kilka wierszy, ale to podejście może być najlepsze w wielu przypadkach. Więcej informacji (patrz "Responsive klas Utility"):
+1 dla linku Coyera. Używałem tego w przeszłości z wielkim skutkiem. –
Yup, rozwiązanie Chrisa Coyera jest bardzo miłe. Znacznie ładniejsza niż ta dostarczona przez bootstrap lub zurbfoundation (po prostu dodają poziomy scroll). –
Od stycznia 2016 r. Odpowiedzi na pytania Coyiera i innych osób mają 5 - 6 lat, zanim wszyscy zaczęli korzystać z Twitter Bootstrap. –
Bootstrap 3 ma teraz czuły tabele z pudełka. Brawo! :)
Można to sprawdzić tutaj: https://getbootstrap.com/docs/3.3/css/#tables-responsive
Dodaj <div class="table-responsive"> otaczających stolik i powinno być dobrze iść:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Aby działać na wszystkich arkuszach można to zrobić:
.table-responsive
{
overflow-x: auto;
}
Ale dotyczy to tylko małych urządzeń (poniżej 768 pikseli): S Źródło: http://getbootstrap.com/css/#tables-responsive – VSP
Aby włączyć to we wszystkich układach rozmiarów, można po prostu upuścić elastyczne style z 768 blok w pliku foundation_and_overrides.css.scss. Coś w rodzaju '' '\t .table-responsive { szerokość: 100%; \t przelew-y: ukryty; \t overflow-x: scroll; \t \t -ms-overflow-style: -ms-autohiding-scrollbar; \t \t -webkit-przepełnienie-przewijanie: dotknięcie; \t} '' ' – genkilabs
@ ase69s sprawdź zaktualizowaną odpowiedź. Właśnie teraz potrzebowałem go na stole z mnóstwem kolumn. Dodanie 'overflow-x: auto' w niestandardowym pliku' CSS' pozwala na większe układy wyświetlania. –
Jeśli używasz Bootstrap 3 i mniej można zastosować reagujących stoły do wszystkich uchwał przez updatingthe pliku:
tables.less
lub zastąpieniem tej części:
@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%;
...
nocie jak zmieniłem pierwszej linii @ wartość ekran-xx.
Wiem, że sprawienie, że wszystkie tabele będą reagować na polecenia, może nie brzmieć tak dobrze, ale bardzo użyteczne okazało się włączenie tej opcji w LG na dużych tabelach (wiele kolumn).
Mam nadzieję, że komuś pomaga.
Co chcesz zrobić? – cimmanon