Мои таблицы отлично отображаются на рабочем столе, но как только я пытаюсь просмотреть мобильную версию, моя таблица оказывается слишком широкой для экрана мобильного устройства. Я использую адаптивный макет.
Как установить ширину таблицы для мобильного просмотра? Какие еще есть альтернативы для представления табличных данных в мобильных представлениях с помощью Bootstrap?
Ответы:
Bootstrap 3 представляет адаптивные таблицы :
<div class="table-responsive"> <table class="table"> ... </table> </div>
Bootstrap 4 похож, но с большим контролем через некоторые новые классы :
Благодарим Джейсона Брэдли за приведенный пример:
источник
table-responsive
класс? В документации Bootstrap сказано: «Чтобы они прокручивались по горизонтали», но я не замечаю разницы, связанной с прокруткой. Единственное отличие, которое я замечаю, заключается в том, что таблица получает границы снаружи при определенном размере экрана ( как показано в примере )..table-responsive
в саму таблицу (например<table class="table table-responsive">
), вместо того, чтобы оборачивать таблицу.table-responsive
, на что вы даже указали в своем примере.hidden-*
наtd
с колонок , которые вы хотите скрыть getbootstrap.com/docs/3.3/css/#responsive-utilitiesВы также можете попробовать один из этих подходов, поскольку большие таблицы не совсем удобны для мобильных устройств, даже если он работает:
http://elvery.net/demo/responsive-tables/
Я неравнодушен к «Больше никаких таблиц», но это, очевидно, зависит от вашего приложения.
источник
Все таблицы в начальной загрузке растягиваются в соответствии с контейнером, в котором они находятся. Вы можете поместить свои таблицы внутри
.span
элемента, чтобы контролировать размер. Этот вопрос SO может вам помочьПочему таблицы Twitter Bootstrap всегда имеют 100% ширину?
источник
После исследования в течение почти 1 месяца я нашел приведенный ниже код, который очень красиво и на 100% отлично работает на моем веб-сайте. Чтобы проверить предварительный просмотр, как он работает, вы можете проверить его по ссылке. https://www.jobsedit.in/state-government-jobs/
КОД CSS -----
@media only screen and (max-width: 500px) { .resp table { display: block ; } .resp th { position: absolute; top: -9999px; left: -9999px; display:block ; } .resp tr { border: 1px solid #ccc; display:block; } .resp td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; width:100%; background-color:White; text-indent: 50%; text-align:left; padding-left: 0px; display:block; } .resp td:nth-child(1) { border: none; border-bottom: 1px solid #eee; position: relative; font-size:20px; text-indent: 0%; text-align:center; } .resp td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; text-indent: 0%; text-align:left; white-space: nowrap; background-color:White; font-weight:bold; } /* Label the data */ .resp td:nth-of-type(2):before { content: attr(data-th) } .resp td:nth-of-type(3):before { content: attr(data-th) } .resp td:nth-of-type(4):before { content: attr(data-th) } .resp td:nth-of-type(5):before { content: attr(data-th) } .resp td:nth-of-type(6):before { content: attr(data-th) } .resp td:nth-of-type(7):before { content: attr(data-th) } .resp td:nth-of-type(8):before { content: attr(data-th) } .resp td:nth-of-type(9):before { content: attr(data-th) } .resp td:nth-of-type(10):before { content: attr(data-th) } }
HTML КОД -
<table> <tr> <td data-th="Heading 1"></td> <td data-th="Heading 2"></td> <td data-th="Heading 3"></td> <td data-th="Heading 4"></td> <td data-th="Heading 5"></td> </tr> </table>
источник