Bootstrap 4响应表不会占用100％的宽度

小编典典

Bootstrap 4响应表不会占用100％的宽度

css

我正在使用Bootstrap
4构建Web应用程序，并遇到一些奇怪的问题。我想利用Bootstrap的表响应类来允许在移动设备上水平滚动表。在台式设备上，桌子应占据所含DIV宽度的100％。

一旦将.table-response类应用于表，表就会水平缩小，并且不再占用宽度的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-response类，它将使表本身变为100％的宽度，但是子元素（TBODY，TR等）仍然很窄。

阅读 247

2020-05-16

共1个答案

小编典典

以下将不起作用。它导致另一个问题。现在它将执行100％的宽度，但在较小的设备上将不会响应：

.table-responsive {
    display: table;
}

所有这些答案都通过推荐引入了另一个问题display: table;。到目前为止，唯一的解决方案是将其用作包装器：

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

2020-05-16