Как отображать таблицы на мобильных устройствах с помощью Bootstrap?

90

Мои таблицы отлично отображаются на рабочем столе, но как только я пытаюсь просмотреть мобильную версию, моя таблица оказывается слишком широкой для экрана мобильного устройства. Я использую адаптивный макет.

Как установить ширину таблицы для мобильного просмотра? Какие еще есть альтернативы для представления табличных данных в мобильных представлениях с помощью Bootstrap?

гусаки
источник
2
Я заметил, что Bootstrap 3.0 будет «прежде всего мобильным». Кто-нибудь думает, что они решат эту «проблему» мобильных столов?
Таблицы в Bootstrap 3 все еще выглядят такими же :(
Джайлс Робертс
@ ta.speot.is Сейчас они лучше, чем в релиз-кандидатах. Однако все приведенные здесь примеры содержат только 4 столбца. По-прежнему не очень хорошо работает для широких столов. В итоге я использовал решение с фиксированным первым столбцом и всей остальной прокруткой.
Джайлс Робертс
@ ta.speot.is Только что видел ваш ответ ниже. Пропустил, что Bootstrap 3 имеет класс, реагирующий на таблицы. Хорошо работает, если вам не нужно, чтобы определенные столбцы всегда были видны.
Джайлс Робертс

Ответы:

125

Bootstrap 3 представляет адаптивные таблицы :

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

Bootstrap 4 похож, но с большим контролем через некоторые новые классы :

... отзывчивый во всех окнах просмотра ... с .table-responsive . Или выберите максимальную точку останова, до которой будет реагировать таблица, используя .table-responsive{-sm|-md|-lg|-xl}.

Благодарим Джейсона Брэдли за приведенный пример:

Адаптивные таблицы

ta.speot.is
источник
6
Спасибо. Как и 99,9% людей, я не стал читать документацию по обновлению. Думаю, мне следовало.
Дэвид Беланже
1
В самом деле ! Кроме того, он делает то, что я изначально хотел, так что для меня это 2 в 1!
Дэвид Беланже
Что именно делает table-responsiveкласс? В документации Bootstrap сказано: «Чтобы они прокручивались по горизонтали», но я не замечаю разницы, связанной с прокруткой. Единственное отличие, которое я замечаю, заключается в том, что таблица получает границы снаружи при определенном размере экрана ( как показано в примере ).
Деннис
5
@ ta.speot.is Я понял, что неправильно прочитал документацию и неправильно использовал класс. Я добавлял .table-responsiveв саму таблицу (например <table class="table table-responsive">), вместо того, чтобы оборачивать таблицу .table-responsive, на что вы даже указали в своем примере.
Деннис
1
@PirateApp Использование hidden-*на tdс колонок , которые вы хотите скрыть getbootstrap.com/docs/3.3/css/#responsive-utilities
ta.speot.is
68

Вы также можете попробовать один из этих подходов, поскольку большие таблицы не совсем удобны для мобильных устройств, даже если он работает:

http://elvery.net/demo/responsive-tables/

Я неравнодушен к «Больше никаких таблиц», но это, очевидно, зависит от вашего приложения.

Аккорды
источник
3
Фантастическая ссылка и три действительно отличных решения! Мне пришлось вернуться к этому вопросу в Google, чтобы проголосовать за ваш ответ. Благодаря!
Саймон
2
Ответ, состоящий исключительно из ссылки, - это плохой этикет при переполнении стека. Страница может исчезнуть, содержимое на странице может измениться, ответ не сразу виден, ответ нельзя улучшить и т. Д. Кстати, ссылка больше не указывает на правильный контент.
Деннис
Согласны, но пока: web.archive.org/web/20130725223053/http://elvery.net/demo/…
Аккорды
1
@ Деннис прав. Пожалуйста, уточните свой ответ, чтобы резюмировать содержание ссылки, и сохраните ссылку также для демонстраций и других деталей. Тем не менее, вы получаете мой голос, поскольку ссылка очень интересная. Ура.
Марио Авад,
5

Все таблицы в начальной загрузке растягиваются в соответствии с контейнером, в котором они находятся. Вы можете поместить свои таблицы внутри .spanэлемента, чтобы контролировать размер. Этот вопрос SO может вам помочь

Почему таблицы Twitter Bootstrap всегда имеют 100% ширину?

Мэтт Буше
источник
0

После исследования в течение почти 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>
Сантош Кумар
источник