Bootstrap3 отзывчивость для таблицы не работает

Ответ 1

Следующая таблица ответов будет работать только <768px.

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

Потому что bootstrap 3 имеет следующий код

@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;
    }
}

Если вам нужна отзывчивая таблица для отображения >768px, вы можете перезаписать ее в своем css без медиа-запроса, точно так же

.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;
}

Ответ 2

Я знаю, что в документации написано так, что я спросил . table-responsive не работает в div над таблицей, но добавление ее в класс таблицы работает... Сделайте следующее и ваша проблема должна быть решена.

Не работает:

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

Работает:

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

DEMO

Ответ 3

Я не понимаю, почему следующее не будет работать... Убедитесь, что вы не устанавливаете ширины или высоты... публикуете полный HTML-код.

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

[bootstrap3]

Ответ 4

Ответ Fizer Khan на этой странице верен. Просто добавьте к нему, так что, если вы будете применять его только в устройствах > 768px, я бы рекомендовал вам создать собственный CSS-стиль в вашем собственном файле CSS, назвав что-то вроде:

.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;
}

Затем вы можете просто использовать его, когда хотите на самом деле переопределить поведение по умолчанию для Bootstrap.

Ответ 5

Вероятно, вы не задали ширину для внешнего (обертывания) div (или раздела). Добавление "width: 100%" к внешнему элементу может решить проблему.