Bootstrap 4 响应式表格不会占用 100% 的宽度 [英] Bootstrap 4 responsive tables won't take up 100% width

查看：31
本文介绍了Bootstrap 4 响应式表格不会占用 100% 的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap 4 构建一个网络应用程序，但遇到了一些奇怪的问题.我想利用 Bootstrap 的表格响应类来允许在移动设备上水平滚动表格.在桌面设备上，表格应占包含 DIV 宽度的 100%.

一旦我将 .table-responsive 类应用到我的桌子上，桌子就会水平缩小，不再占据 100% 的宽度.有任何想法吗?

这是我的标记:

<html lang="en" class="mdl-js"><头><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"><身体><div class="container-fluid no-padding"><div class="row"><div class="col-md-12"><table class="table table-responsive" id="Queue"><头><tr><th><span span="sr-only">Priority</span></th><th>起源</th><th>目的地</th><th>模式</th><第>日期</th><th><span span="sr-only">Action</span></th></tr></thead><tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d"><td>0</td><td>凤凰城，亚利桑那</td><td>加利福尼亚州圣地亚哥</td><td>驾驶</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>

<br>

<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>

如果我将 100% 的宽度应用到 .table-responsive 类，它会使表格本身变成 100% 的宽度，但子元素(TBODY、TR 等)仍然很窄.

解决方案

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

.table-responsive {显示:表；}

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

<table class="table">...

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.

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?

Here is my markup:

<!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>

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.

解决方案

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;
}

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆