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

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

Как только я применяю .стол-отзывчивый класс к моей таблице, Таблица сжимается по горизонтали и больше не занимает 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% к.таблица-отзывчивый класс, он делает таблицу самой 100% широкой, но дочерние элементы (TBODY, TR и т. д.) все еще узкие.

49
bootstrap-4 css

9 ответов

следующее не будет работать. Это вызывает еще одну проблему. Теперь он будет делать ширину 100%, но он не будет реагировать на небольших устройствах:

.table-responsive {
    display: table;
}

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

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

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

просто добавьте другой класс в элемент таблицы: 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 показать документы

14

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

.table-responsive {
    display: table;
}

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

Edit:

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

5

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

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

2

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

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

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

делая это, дополнительный css не требуется.

в коде OP, .таблица-отзывчивый может использоваться наряду с.col-md-12 снаружи .

2

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

переопределить это свойство обратно в display: table в вашей собственной таблице стилей 

.table-responsive {
    display: table;
}

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

1

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

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

например

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

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

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

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

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

0