Загрузочные таблицы Bootstrap 4 не будут занимать 100% ширины

Ответ 1

Следующие НЕ РАБОТАЮТ. Это вызывает еще одну проблему. Теперь он будет использовать ширину 100%, но не будет реагировать на более мелкие устройства:

.table-responsive {
    display: table;
}

Все эти ответы ввели новую проблему, рекомендуя display: table;. Единственное решение на данный момент - использовать его в качестве обертки:

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

Ответ 2

Это решение сработало для меня:

просто добавьте еще один класс в элемент таблицы: w-100 d-block d-md-table

так будет: <table class="table table-responsive w-100 d-block d-md-table">

для начальной загрузки 4 w-100 установите ширину 100% d-block (отображение: блок) и d-md-table (отображение: таблица на минимальной ширине: 576 пикселей)

Bootstrap 4 отображать документы

Ответ 3

Если вы используете V4.1 и, согласно их документам, не присваивайте.table-response непосредственно таблице. Таблица должна быть.table, и если вы хотите, чтобы ее можно было горизонтально прокручивать (отзывчиво), добавьте ее в контейнер, реагирующий на.table (например, <div>).

Адаптивные таблицы позволяют легко прокручивать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех окнах просмотра, добавив.table в.table-responseive.

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

Для этого не нужно никаких дополнительных CSS.

В коде OP можно использовать.table-responseive вместе с.col-md-12 снаружи.

Ответ 4

По какой-то причине чувствительная таблица, в частности, не ведет себя так, как должна. Вы можете исправить это, избавившись от display:block;

.table-responsive {
    display: table;
}

Я могу записать отчет об ошибке.

Edit:

Это уже существующая ошибка.

Ответ 5

Решение, совместимое с v4 структуры, - это установить правильную точку останова. Вместо использования .table-responsive, вы должны иметь возможность использовать .table-responsive-sm (чтобы просто реагировать на небольшие устройства)

Вы можете использовать любую из доступных конечных точек: table-responsive {-sm | -md | -lg | -xl}

Ответ 6

Ни один из этих ответов не работает (дата сегодня 9 декабря 2018 года). Правильное решение здесь - добавить.table-responseive-sm к вашей таблице:

<table class='table table-responsive-sm'>
[Your table]
</table>

Это применяет аспект отзывчивости только к представлению SM (мобильное). Таким образом, в мобильном представлении вы получаете прокрутку по желанию, а в более крупных представлениях таблица не реагирует и, таким образом, отображается на всю ширину, как нужно.

Документы: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Ответ 7

Что, поскольку класс .table-responsive добавляет свойство display: block к вашему элементу, который меняет его из предыдущего display: table.

Отмените это свойство на display: table в своей собственной таблице стилей

.table-responsive {
    display: table;
}

Примечание. Убедитесь, что этот стиль выполняется после того, как вы загрузили код начальной загрузки.

Ответ 8

Это вызвано классом table-responsive, дающим таблице свойство display:block, что странно, потому что это перезаписывает исходные table классы display:table и поэтому таблица сжимается при добавлении table-responsive.

Скорее всего, это до бутстрапа 4, все еще находящегося в dev. Вы можете перезаписать это свойство своим собственным классом, который устанавливает display:table, и это не повлияет на отзывчивость таблицы.

например.

.table-responsive-fix{
   display:table;
}

Ответ 9

Принимая во внимание другие ответы, я бы сделал что-то подобное, спасибо!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

Ответ 10

Для меня работало следующее решение:

• Добавить новый класс в таблицу или изменить класс таблицы

• Установите display: table в пределах точки останова, чтобы развернуть таблицу

  .your-class {   @include media-breakpoint-up (md) {        display: table;   }  }

Добавьте display: inherit на мобильный, если вам нужно

Ответ 11

Я обнаружил, что использование рекомендованного класса-адаптера таблиц в оболочке по-прежнему приводит к (удивительно) горизонтальному сжатию адаптивных таблиц:

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

Решением для меня было создание следующих медиа-точек останова и классов для предотвращения этого:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Затем я могу добавить соответствующий класс в мой элемент таблицы. Например:

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

Здесь оболочка устанавливает ширину в 100% для больших и больших для Bootstrap. С классом table-lg, примененным к элементу таблицы, ширина таблицы также устанавливается равной 100% для больших и больших, но устанавливается равной 992px для средних и меньших. Классы table-xs, table-sm, table-md и table-xl работают одинаково.

Ответ 12

Для Bootstrap 4.x используйте утилиты отображения:

w-100 d-print-block d-print-table

Использование:

<table class="table w-100 d-print-block d-print-table">

Ответ 13

Создавайте адаптивные таблицы, оборачивая любые .table таблицей .table-responseive {-sm | -md | -lg | -xl}, заставляя таблицу прокручиваться горизонтально в каждой точке останова максимальной ширины до (но не включая) 576px, 768px, 992px и 1120px соответственно.

просто оберните таблицу с помощью .table-responseive [-sm | -md | -lg | -xl}

например

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

загрузчик 4 стола