Bootstrap 4响应表不会占用100％的宽度 [英] Bootstrap 4 responsive tables won't take up 100% width
问题描述
我正在使用Bootstrap 4构建Web应用程序，并遇到一些奇怪的问题.我想利用Bootstrap的表响应类来允许在移动设备上水平滚动表.在台式设备上，桌子应占据所含DIV宽度的100％.
I am building a web app using Bootstrap 4 and running into some weird issues. I want to utilize Bootstrap's table-responsive class to allow horizontal scrolling of the tables on mobile devices. On desktop devices the table should take up 100% of the containing DIV's width.
一旦我将.table-response类应用于我的表，该表就会水平缩小，并且不再占用宽度的100％.有任何想法吗?
As soon as I apply the .table-responsive class to my table, the table shrinks horizontally and no longer takes up 100% of the width. Any ideas?
这是我的标记:
<!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>
如果我对.table-response类应用100％的宽度，它将使表本身具有100％的宽度，但是子元素(TBODY，TR等)仍然很窄.
If I apply a 100% width to the .table-responsive class, it makes the table itself a 100% wide but the child elements (TBODY, TR, etc.) are still narrow.
推荐答案
以下内容无效.这会导致另一个问题.现在它将执行100％的宽度，但在较小的设备上将不会响应:
The following WON'T WORK. It causes another issue. It will now do the 100% width but it won't be responsive on smaller devices:
.table-responsive {
display: table;
}
所有这些答案通过推荐display: table;引入了另一个问题.到目前为止，唯一的解决方案是将其用作包装器:
All these answers introduced another problem by recommending display: table;. The only solution as of right now is to use it as a wrapper:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
这篇关于Bootstrap 4响应表不会占用100％的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
