Адаптивні таблиці 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 
— їсти-спати-код
джерело

Відповіді:

158

Наступні НЕ ПРАЦЮЮТЬ. Це викликає ще одну проблему. Тепер він буде робити 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 class = "table table-responsive">
— Віннемукка
ця проблема досі не вирішена в bootstrap 4, хоча одна частина погоджується з вашою відповіддю, в інструкціях із перенесення з bootstrap 3 до 4 зазначено: "адаптивні таблиці більше не потребують елемента обтікання. Натомість просто поставте .table-responsive прямо на <table>. "... знайдено тут: getbootstrap.com/docs/4.0/migration/#tables
— Марін
Для мене ідеально працює у версії 4.3.1! Дякую
— Ібрагім Іса
38

Це рішення спрацювало для мене:

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

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

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

Відображення документів Bootstrap 4

— Файтранеозтер
джерело
2
Працює для Bootstrap4 Beta! Ключ був w-100. спасибі.
— ObjectiveTC
Чи не має це рішення такий же ефект, як просто робити <table class="table table-responsive-md">?
— Джеймс Ентоні Уїлсон
21

Якщо ви використовуєте V4.1 і відповідно до їхніх документів, не призначайте .table-responsive безпосередньо до таблиці. Таблиця повинна бути .table, і якщо ви хочете, щоб вона могла горизонтально прокручуватися (реагувати), додайте її всередину контейнера .table-responsive (a <div>, наприклад).

Адаптивні таблиці дозволяють легко прокручувати таблиці горизонтально. Зробіть будь-яку таблицю чутливою у всіх вікнах перегляду, обернувши .table з .table-responsive.

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

для цього не потрібно зайвого css.

У коді операційної системи, .table-responsive може використовуватися поряд із .col-md-12 зовні.

— Марсело М'яра
джерело
3
Це має бути вірною відповіддю після стабільної версії bootstrap. Thx
— Пітер
2
Це відповідь. Дякую
— Gjaa,
1
Правильна відповідь!
— Ендрю Шульц
6

З якихось причин адаптивна таблиця, зокрема, поводиться не так, як слід. Ви можете виправити це, позбувшисьdisplay:block;

.table-responsive {
    display: table;
}

Я можу подати звіт про помилку.

Редагувати:

Це існуюча помилка.

— Серг Черната
джерело
5

Жодна з цих відповідей не працює (дата сьогодні 9 грудня 2018 року). Правильна роздільна здатність - це додати .table-responsive-sm до вашої таблиці:

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

Це стосується аспекту реагування лише на перегляд SM (мобільний). Отже, у мобільному поданні ви отримуєте прокрутку за бажанням, а у більших представленнях таблиця не реагує і таким чином відображається на всю ширину, як бажано.

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

— SongBox
джерело
2

Рішення, сумісне з v4 фреймворку, полягає у встановленні належної точки зупинку. Замість того, щоб використовувати .table-responsive, ви повинні мати можливість використовувати .table-responsive-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.

Швидше за все, до bootstrap 4 все ще перебуває у розробці. Ви можете перезаписати цю властивість своїм власним класом, який встановлює, display:tableі це не вплине на чуйність таблиці.

напр

.table-responsive-fix{
   display:table;
}
— Каллум
джерело
1

Беручи до уваги інші відповіді, я зробив би щось подібне, дякую!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
— Олексій
джерело
1

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

просто оберніть таблицю з .table-responsive {-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, застосованим до елемента table, ширина таблиці також встановлюється на 100% для великих та більших, але встановлюється на 992px для середніх та менших. Класи table-xs, table-sm, table-md та table-xl працюють однаково.

— СкоттіB
джерело
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.