我正在使用 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 等)仍然很窄。
最佳答案
以下内容无效。它会导致另一个问题。它现在将使用 100% 宽度，但在较小的设备上不会响应:
.table-responsive {
display: table;
}
所有这些答案通过推荐 display: table; 引入了另一个问题。目前唯一的解决方案是将其用作包装器:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
关于css - Bootstrap 4 响应式表格不会占用 100% 的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41747667/