Я создаю веб-приложение с помощью 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 и т. Д.) По-прежнему узкие.
источник
table-responsive
класса в качестве оболочки возвращает нас к Bootstrap 3 ...? Рад, что на данный момент есть решение! Bootstrap 4 Alpha ;-)Это решение сработало для меня:
просто добавьте еще один класс в элемент таблицы:
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
источник
<table class="table table-responsive-md">
?Если вы используете V4.1 и в соответствии с их документами, не назначайте .table-responseive непосредственно таблице. Таблица должна быть .table, и если вы хотите, чтобы она была горизонтально прокручиваемой (отзывчивой), добавьте ее в контейнер, реагирующий на .table (например, a
<div>
).<div class="table-responsive"> <table class="table"> ... </table> </div>
при этом не требуется никаких дополнительных css.
В коде OP .table-responseive может использоваться вместе с .col-md-12 снаружи.
источник
По какой-то причине адаптивная таблица, в частности, ведет себя не так, как должна. Вы можете исправить это, избавившись от
display:block;
.table-responsive { display: table; }
Я могу отправить отчет об ошибке.
Редактировать:
Это существующая ошибка.
источник
Ни один из этих ответов не работает (сегодня, 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
источник
table-responsive-?
класса непосредственно кtable
элементу было единственным способом заставить его работать, как описано, а не использовать оболочку,div
но код в вашем примере фактически означает, что толькоxs
окна просмотра будут иметь отзывчивое поведение иsm
больше будет "нормально".Решение, совместимое с v4 фреймворка, - установить правильную точку останова. Вместо того, чтобы использовать .table-responseive, вы должны иметь возможность использовать .table-responseive-sm (чтобы просто реагировать на небольшие устройства)
Вы можете использовать любую из доступных конечных точек: зависимая от таблицы {-sm | -md | -lg | -xl}
источник
Это потому, что
.table-responsive
класс добавляет свойствоdisplay: block
к вашему элементу, которое меняет его по сравнению с предыдущимdisplay: table
.Переопределите это свойство обратно
display: table
в свою собственную таблицу стилей.table-responsive { display: table; }
Примечание: убедитесь, что этот стиль выполняется после кода начальной загрузки, чтобы его можно было переопределить.
источник
Это вызвано тем, что
table-responsive
класс дает таблице свойствоdisplay:block
, что странно, потому что это перезаписываетtable
исходные классыdisplay:table
и поэтому таблица сжимается при добавленииtable-responsive
.Скорее всего, он до начальной загрузки 4 все еще находится в разработке. Вы можете безопасно перезаписать это свойство своим собственным классом, который задает,
display:table
и это не повлияет на отзывчивость таблицы.например
.table-responsive-fix{ display:table; }
источник
Принимая во внимание другие ответы, я бы сделал что-то вроде этого, спасибо!
.table-responsive { @include media-breakpoint-up(md) { display: table; } }
источник
просто оберните таблицу с помощью .table-responseive {-sm | -md | -lg | -xl}
например
<div class="table-responsive-md"> <table class="table"> </table> </div>
бутстрап 4 таблицы
источник
Я обнаружил, что использование рекомендованного класса, отвечающего за таблицы, в оболочке по-прежнему вызывает (что удивительно) сокращение адаптивных таблиц по горизонтали:
<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 работают одинаково.
источник
Для Bootstrap 4.x используйте утилиты отображения:
w-100 d-print-block d-print-table
Использование :
<table class="table w-100 d-print-block d-print-table">
источник
Кажется, что элемент "sr-only" и его стили внутри таблицы являются причиной этой ошибки. По крайней мере, у меня была такая же проблема, и после нескольких месяцев биться головой о стену мы определили причину, хотя я до сих пор не понимаю, почему. Это
left:0
исправлено добавлением к стилям "только для sr".источник