Bootstrap 4 响应式表格不会占用 100% 的宽度

【问题标题】：Bootstrap 4 responsive tables won't take up 100% widthBootstrap 4 响应式表格不会占用 100% 的宽度
【发布时间】：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 等）仍然很窄。

【问题讨论】：

    标签： css bootstrap-4


    【解决方案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" 。像这样..
          • 这个问题在 bootstrap 4 中仍然没有得到解决，尽管一部分同意你的回答，从 bootstrap 3 到 4 的迁移说明状态：“响应式表不再需要包装元素。相反，只需将 .table-responsive 放在
            • 上。”... 在这里找到：getbootstrap.com/docs/4.0/migration/#tables
          • 在 4.3.1 版上非常适合我！谢谢
          【解决方案5】：

          考虑到其他答案，我会这样做，谢谢！

          .table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

          【讨论】：

            【解决方案6】：

            这个解决方案对我有用：

            只需在表格元素中添加另一个类： w-100 d-block d-md-table

            所以它会是： &lt;table class="table table-responsive w-100 d-block d-md-table"&gt;

            对于 bootstrap 4 w-100 将宽度设置为 100% d-block（显示：块）和 d-md-table（显示：最小宽度上的表格：576px）

            Bootstrap 4 display docs

            【讨论】：

            • 适用于 Bootstrap4 测试版！关键是 w-100。谢谢。
            • 这个解决方案是不是和刚才做&lt;table class="table table-responsive-md"&gt;的效果不一样？
            【解决方案7】：

            符合v4框架的解决方案是设置合适的断点。而不是使用 .table-responsive，您应该能够使用 .table-responsive-sm（仅在小型设备上响应）

            您可以使用任何可用的端点：table-responsive{-sm|-md|-lg|-xl}

            【讨论】：

              【解决方案8】：

              如果您使用的是 V4.1，并且根据他们的文档，请不要将 .table-responsive 直接分配给表格。表格应该是 .table，如果您希望它可以水平滚动（响应式），请将其添加到 .table 响应式容器中（例如 &lt;div&gt;）。

              响应式表格允许表格轻松水平滚动。通过用 .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%。

                      【讨论】：

                      • 这个答案有效！
                      猜你喜欢
                      相关资源
                      最近更新 更多
                      热门标签
                      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode