Адаптивные таблицы Bootstrap 4 не будут занимать 100% ширины

97

Я создаю веб-приложение с помощью Bootstrap 4 и сталкиваюсь с некоторыми странными проблемами. Я хочу использовать класс Bootstrap, реагирующий на таблицы, чтобы разрешить горизонтальную прокрутку таблиц на мобильных устройствах. На настольных устройствах таблица должна занимать 100% ширины содержащего DIV.

Как только я применяю класс .table-responsive к своей таблице, таблица сжимается по горизонтали и больше не занимает 100% ширины. Любые идеи?

Вот моя разметка:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

Если я применяю 100% ширину к классу .table-responsive, это делает саму таблицу 100% шириной, но дочерние элементы (TBODY, TR и т. Д.) По-прежнему узкие.

css  bootstrap-4 
— есть-спать-код
источник

Ответы:

161

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

.table-responsive {
    display: table;
}

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

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
— Джон FatBoy Doeeee Rolla
источник
2
Возился с этим вечно - слишком рано думать о том, чтобы просто обернуть его. Ваш мужчина
— JSF
Использование table-responsiveкласса в качестве оболочки возвращает нас к Bootstrap 3 ...? Рад, что на данный момент есть решение! Bootstrap 4 Alpha ;-)
— Стив Мейснер
Не вижу этой работы с бета-версией. Похоже, вам нужно будет удалить div и добавить "table-responsive" вдоль "table". Вот так .. <table class = "table table-
— Виннемукка
эта проблема до сих пор не решена в начальной загрузке 4, хотя одна часть согласна с вашим ответом, в инструкциях по миграции с начальной загрузки 3 на 4 указано: «адаптивным таблицам больше не требуется обертывающий элемент. Вместо этого просто поместите .table-responseive прямо на <table>. "... найдено здесь: getbootstrap.com/docs/4.0/migration/#tables
— Marin
У меня отлично работает на версии 4.3.1! Спасибо
— Ибрагим Иса
40

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

просто добавьте еще один класс в элемент таблицы: 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(display: block) и d-md-table(display: table on min-width: 576px)

Отображение документации Bootstrap 4

— Файтранеозтер
источник
2
Работает для Bootstrap4 Beta! Ключ был w-100. Спасибо.
— ObjectiveTC
Разве это решение не дает того же эффекта, что и простое действие <table class="table table-responsive-md">?
— Джеймс Энтони Уилсон
22

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

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

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

при этом не требуется никаких дополнительных css.

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

— Марсело Мьяра
источник
3
Предполагается, что это правильный ответ, поскольку это стабильная версия начальной загрузки. Спасибо
— Питер
2
Это ответ. Спасибо
— Gjaa
1
Правильный ответ!
— Эндрю Шульц,
7

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

.table-responsive {
    display: table;
}

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

Редактировать:

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

— Серг Черната
источник
5

Ни один из этих ответов не работает (сегодня, 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

— SongBox
источник
Я обнаружил то же самое - применение table-responsive-?класса непосредственно к tableэлементу было единственным способом заставить его работать, как описано, а не использовать оболочку, divно код в вашем примере фактически означает, что только xsокна просмотра будут иметь отзывчивое поведение и smбольше будет "нормально".
— Кристофер Кинг,
2

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

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

— Rubén_ic
источник
1

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

Переопределите это свойство обратно display: tableв свою собственную таблицу стилей

.table-responsive {
    display: table;
}

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

— Никхил Нанджаппа
источник
1

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

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

например

.table-responsive-fix{
   display:table;
}
— Каллум
источник
1

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

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
— Алексис
источник
1

Создайте адаптивные таблицы, заключив любую .table в .table-responsive {-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 таблицы

— iMezied
источник
0

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

<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% для больших и больших размеров, но устанавливается на 992 пикселей для средних и меньших размеров. Классы table-xs, table-sm, table-md и table-xl работают одинаково.

— СкоттиБ
источник
0

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

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

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

<table class="table w-100 d-print-block d-print-table">
— Бора
источник
0

Кажется, что элемент "sr-only" и его стили внутри таблицы являются причиной этой ошибки. По крайней мере, у меня была такая же проблема, и после нескольких месяцев биться головой о стену мы определили причину, хотя я до сих пор не понимаю, почему. Это left:0исправлено добавлением к стилям "только для sr".

— Брин Ньюэлл
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.