Когда ширина таблицы превышает ширину диапазона, как на этой странице: http://jsfiddle.net/rcHdC/
Вы увидите, что содержимое таблицы находится за пределами span
.
Что было бы лучшим способом удовлетворить этот случай?
Когда ширина таблицы превышает ширину диапазона, как на этой странице: http://jsfiddle.net/rcHdC/
Вы увидите, что содержимое таблицы находится за пределами span
.
Что было бы лучшим способом удовлетворить этот случай?
Ответы:
Bootstrap 3 теперь имеет адаптивные таблицы из коробки. Ура! :)
Вы можете проверить это здесь: https://getbootstrap.com/docs/3.3/css/#tables-responsive
Добавьте <div class="table-responsive">
окружение к вашему столу, и все будет хорошо:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Чтобы он работал на всех макетах, вы можете сделать это:
.table-responsive
{
overflow-x: auto;
}
overflow-x: auto
в пользовательский CSS
файл помогает для больших макетов дисплея.
border: 1px solid #dddddd;
.table-responsive td, .table-responsive th { white-space:nowrap; }
чтобы ячейки не сжимались автоматически и не добавляли разрывы строк.
Один из доступных вариантов - fooTable. Отлично работает на адаптивном веб-сайте и позволяет устанавливать несколько точек останова ... fooTable Link
Имея дело с адаптивными таблицами, вы можете делать много разных вещей.
Мне лично нравится такой подход Криса Койера:
Здесь вы можете найти много других альтернатив:
Если вы можете использовать Bootstrap и получить что-то быстро, вы можете просто использовать имена классов «.hidden-phone» и «.hidden-tablet», чтобы скрыть некоторые строки, но этот подход во многих случаях может оказаться лучшим. Подробнее (см. «Адаптивные служебные классы»):
Если вы используете Bootstrap 3 и Less, вы можете применить адаптивные таблицы ко всем разрешениям, обновив файл:
tables.less
или перезаписав эту часть:
@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;
}
}
}
}
}
}
С участием:
@media (max-width: @screen-lg) {
.table-responsive {
width: 100%;
...
Обратите внимание, как я изменил значение первой строки @ screen-XX.
Я знаю, что создание адаптивных таблиц для всех таблиц может показаться не таким уж хорошим, но я счел чрезвычайно полезным включить это до LG для больших таблиц (много столбцов).
Надеюсь, это кому-то поможет.