Мої таблиці добре відображаються на робочому столі, але як тільки я спробую переглянути мобільну версію, моя таблиця виявляється занадто широкою для екрану мобільного пристрою. Я використовую адаптивний макет.
Як я можу встановити ширину таблиці для мобільного перегляду? Які ще є альтернативи представлення табличних даних на мобільних представленнях за допомогою Bootstrap?
Відповіді:
Bootstrap 3 представляє адаптивні таблиці :
<div class="table-responsive">
<table class="table">
...
</table>
</div>Bootstrap 4 подібний, але з більшим контролем за допомогою деяких нових класів :
... чуйний у всіх вікнах перегляду ... за допомогою
.table-responsive. Або виберіть максимальну точку зупинки, за допомогою якої можна отримати адаптивну таблицю за допомогою.table-responsive{-sm|-md|-lg|-xl}.
Подяка Джейсону Бредлі за наданий приклад:
table-responsiveклас? Bootstrap docs говорить "щоб вони прокручувались горизонтально", але я не помічаю різниці, пов'язаної з прокруткою. Єдина різниця, яку я помічаю, полягає в тому, що таблиця отримує межі зовні, коли перебуває під певним розміром екрана ( як видно з прикладу ).
.table-responsiveдо самої таблиці (наприклад <table class="table table-responsive">), замість того, щоб обертати таблицю .table-responsive, на що ви навіть вказали у своєму прикладі.
hidden-*в tds стовпців, які ви хочете приховати getbootstrap.com/docs/3.3/css/#responsive-utilities
Ви також можете розглянути один із цих підходів, оскільки більші таблиці не зовсім зручні для мобільних пристроїв, навіть якщо це працює:
http://elvery.net/demo/responsive-tables/
Я прихильний до "Більше таблиць", але це, очевидно, залежить від вашої програми.
Усі таблиці в bootstrap розтягуються відповідно до контейнера, в якому вони перебувають. Ви можете помістити свої таблиці всередину .spanелемента, щоб контролювати розмір. Це SO-запитання може вам допомогти