Reagowanie Bootstrap3 na stół nie działa

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

Ten blok kodu nie daje tablicy odpowiedzi w Bootstrap. Pomóż mi w osiągnięciu tabeli responsywnej za pomocą bootstrap. Z góry dziękujęReagowanie Bootstrap3 na stół nie działa

Źródło

2013-09-03 sulthana

Czy możesz zapewnić skrzypce rzeczywistemu znacznikowi? powinno działać dobrze, zobacz to demo http://jsfiddle.net/koala_dev/VwF6t/ –

Użyłem http://elvery.net/demo/responsive-tables/ jeśli to może być pomocne dla ciebie – asharajay

Sprawdź, czy masz włączyli pliki lib bootstrapu poprawnie, sprawdź ścieżkę i proces ... – SaurabhLP

Wiem, że dokumentacja mówi tak, o co poprosiłem .table-responsive doesn't work in div above the table but adding it to the table class works ... Wykonaj następujące czynności, a twój problem powinien zostać rozwiązany.

Nie działa:

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

działa:

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

DEMO

Źródło

2013-09-22 09:47:19 Shina

Nie sądzę, że to działa, po prostu działa jak normalny (nie odpowiadający) stół. Spróbuj zmienić rozmiar panelu wyjściowego na mniejszy, niż mieści się w szerokości panelu. Zobaczysz pasek przewijania okna, a nie tylko tabelę. –

@ Amitay Dobo ... gdy masz wiele kolumn tak, ale patrząc na domyślną wersję "Nie działa", to prawie robi to samo, z wyjątkiem przewijania pojawia się w tabeli, która nie pojawia się w przeglądarce. – Shina

Połączone demo nie działa. Nawet gdy zmniejszam widok do maleńkiego, to po prostu wciąż strzyżę stół, a nie pasek przewijania. –

Nie widzę dlaczego następujące nie będzie działać ... Upewnij się, że nie są ustalone szerokość lub wysokość ... opublikować pełny kod HTML.

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

[bootstrap3]

Źródło

2014-02-28 15:09:02 Omar

Po Responsive tabela działa tylko <768px.

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

Ponieważ bootstrap 3 został podany kod

@media (max-width: 767px) { 
    .table-responsive { 
     width: 100%; 
     margin-bottom: 15px; 
     overflow-y: hidden; 
     overflow-x: scroll; 
     -ms-overflow-style: -ms-autohiding-scrollbar; 
     border: 1px solid #DDD; 
     -webkit-overflow-scrolling: touch; 
    } 
}

Jeśli chcesz reaguje stół do wyświetlania >768px, można zastąpić go w CSS bez zapytania mediów, podobnie jak to

.table-responsive { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #DDD; 
    -webkit-overflow-scrolling: touch; 
}

Źródło

2014-05-08 06:09:27

Zasługujesz na medal! Nic z avobe nie zadziałało dla mi, z wyjątkiem tego, co napisałeś ... dzięki! – UrielUVD

Fizer Odpowiedź Khan na tej stronie jest poprawna. Wystarczy dodać do niego chociaż, tak, że tylko zastosowanie tego kiedy absolutnie chcesz go w urządzeniach> 768px, polecam Ci stworzenie własnego stylu CSS w swoim własnym pliku CSS o nazwie coś takiego:

.table-responsive-force { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #DDD; 
    -webkit-overflow-scrolling: touch; 
}

Następnie możesz go użyć, kiedy chcesz zastąpić domyślne zachowanie Bootstrapa.

Źródło

2015-03-25 21:01:25

To powinien być komentarz do odpowiedzi @Fizera Khana. –

Zgadzam się z Tobą @SamuelLindblom, ale ta odpowiedź pomogła tylko dlatego, że chciałem zastosować tę regułę tylko w kilku specyficznych tabelach bez uciekania się do tagów stylu. –

Prawdopodobnie nie ustawiłeś szerokości na zewnętrzną (zawijanie) div (lub sekcję). Dodanie "width: 100%" do zewnętrznego elementu może rozwiązać problem.

Źródło

2015-12-07 10:55:52 Bosko

Reagowanie Bootstrap3 na stół nie działa

Odpowiedz

Powiązane problemy