Bootstrap 4 响应式表格不会占用 100% 的宽度
Posted
技术标签:
【中文标题】Bootstrap 4 响应式表格不会占用 100% 的宽度【英文标题】：Bootstrap 4 responsive tables won't take up 100% width 【发布时间】：2017-06-04 11:58:30 【问题描述】：我正在使用 Bootstrap 4 构建一个 Web 应用程序并遇到了一些奇怪的问题。我想利用 Bootstrap 的表格响应类来允许在移动设备上水平滚动表格。在桌面设备上，表格应占包含 DIV 宽度的 100%。
一旦我将 .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 等）仍然很窄。
【问题讨论】：
【参考方案1】：由于某种原因，响应式表的行为尤其不正常。你可以通过去掉display:block;来修补它
.table-responsive
display: table;
我可能会提交错误报告。
编辑：
It is an existing bug.
【讨论】：
【参考方案2】：这是因为 .table-responsive 类将属性 display: block 添加到您的元素中，从而将其从以前的 display: table 更改。
在您自己的样式表中将此属性覆盖回 display: table
.table-responsive
display: table;
注意：确保此样式在您的引导代码之后执行以使其覆盖。
【讨论】：
【参考方案3】：这是由table-responsive 类为表提供display:block 的属性引起的，这很奇怪，因为这会覆盖table 类原来的display:table，这也是添加table-responsive 时表缩小的原因。
很可能是由于 bootstrap 4 仍在开发中。您可以安全地使用您自己的设置 display:table 的类覆盖此属性，并且不会影响表格的响应性。
例如
.table-responsive-fix
display:table;
【讨论】：
【参考方案4】：以下内容不起作用。它导致另一个问题。它现在会达到 100% 的宽度，但不会在较小的设备上响应：
.table-responsive
display: table;
所有这些答案都通过推荐display: table;引入了另一个问题。目前唯一的解决方案是将其用作包装器：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
【讨论】：
永远对此感到烦躁——考虑简单地包装它还为时过早。你的男人 使用table-responsive 类作为包装器会让人回想起 Bootstrap 3...？很高兴现在有一个解决方案！引导程序 4 Alpha ;-)
在测试版中看不到这项工作。看起来您需要删除 div 并沿 "table" 添加 "table-responsive" 。像这样.. 考虑到其他答案，我会这样做，谢谢！
.table-responsive
@include media-breakpoint-up(md)
display: table;
【讨论】：
【参考方案6】：这个解决方案对我有用：
只需在表格元素中添加另一个类：
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 display docs
【讨论】：
适用于 Bootstrap4 测试版！关键是 w-100。谢谢。 这个解决方案是不是和刚才做<table class="table table-responsive-md">的效果不一样？【参考方案7】：
符合v4框架的解决方案是设置合适的断点。而不是使用 .table-responsive，您应该能够使用 .table-responsive-sm（仅在小型设备上响应）
您可以使用任何可用的端点：table-responsive-sm|-md|-lg|-xl
【讨论】：
【参考方案8】：如果您使用的是 V4.1，并且根据他们的文档，请不要将 .table-responsive 直接分配给表格。表格应该是 .table，如果您希望它可以水平滚动（响应式），请将其添加到 .table 响应式容器中（例如 <div>）。
响应式表格允许表格轻松水平滚动。通过用 .table-responsive 包装一个 .table，使任何表格在所有视口中都具有响应性。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
这样做，不需要额外的 css。
在 OP 的代码中，.table-responsive 可以与外部的 .col-md-12 一起使用。
【讨论】：
这应该是正确的答案，因为 bootstrap 的稳定版本。谢谢 这就是答案。谢谢 正确答案！【参考方案9】：我发现在包装器中使用推荐的表响应类仍然会导致响应表（令人惊讶地）水平收缩：
<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>
这里包装器将每个 Bootstrap 的宽度设置为 100% 和更大。将 table-lg 类应用于表格元素后，表格宽度也设置为 100%（大或更大），但设置为 992px（中和小）。 table-xs、table-sm、table-md 和 table-xl 类的工作方式相同。
【讨论】：
【参考方案10】：这些答案都不起作用（今天是 2018 年 12 月 9 日）。此处正确的解决方法是将 .table-responsive-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 和更大的将是“正常的”。【参考方案11】：
对于 Bootstrap 4.x 使用显示实用程序：
w-100 d-print-block d-print-table
用法：
<table class="table w-100 d-print-block d-print-table">
【讨论】：
【参考方案12】：通过包装任何 .table 来创建响应式表 .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>
bootstrap 4 tables
【讨论】：
【参考方案13】：似乎“sr-only”元素及其在表格中的样式是导致此错误的原因。至少我遇到了同样的问题，经过几个月的头撞墙后，我们确定了原因，尽管我仍然不明白为什么。将left:0 添加到“sr-only”样式修复了它。
【讨论】：
【参考方案14】：不确定是否有帮助，但将您的表格响应式包装在一个 div 中并将 .responsive-table 类添加到两者：
table.table-responsive
display: block;
overflow: scroll;
.table-responsive
overflow: hidden;
padding: 0px;
margin: 0px;
table-layout: fixed;
width: 100%;
display: table;
这提供了一个 100% 扩展的周围 div，它随列宽缩放，同时使实际的表格可滚动。如果我在页面上有一个侧栏，上述解决方案将不起作用，因为它们假定宽度为 100%。
【讨论】：
这个答案有效！以上是关于Bootstrap 4 响应式表格不会占用 100% 的宽度的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 响应式表格不会在 iOS 设备上水平滚动
在 Bootstrap 4 中看不到文本的响应式表格压缩表单字段
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格