Question

我正在使用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等）仍然很窄。

Answer 1

以下WON＆＃t; T WORK。它引起了另一个问题。它现在可以实现100％的宽度，但它不会对较小的设备做出响应：

.table-responsive {
    display: table;
}

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

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

Answer 2

这个解决方案对我有用：

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

所以它会是： <table class="table table-responsive w-100 d-block d-md-table">

for bootstrap 4 w-100将宽度设置为100％d-block（显示：块）和d-md-table（显示：最小宽度表：576px）

Bootstrap 4 display docs

Answer 3

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

响应表允许轻松地水平滚动表。通过用.table-sensitive包装.table来使所有表在所有视口中具有响应性。

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

这样做，不需要额外的CSS。

在OP的代码中，.table-sensitive可以与外部的.col-md-12一起使用。

Answer 4

由于某种原因，特别是响应表的行为并不像它应该的那样。您可以通过删除display:block;

来修补它

.table-responsive {
    display: table;
}

我可以提交错误报告。

修改

It is an existing bug.

Answer 5

符合框架v4的解决方案是设置正确的断点。而不是使用.table-responsive，你应该能够使用.table-responsive-sm（只对小型设备做出响应）

您可以使用任何可用的端点：表格响应{-sm | -md | -lg | -xl}

Answer 6

这是因为.table-responsive类会将属性 display: block 添加到您的元素中，该元素会从之前的 display: table

在您自己的样式表中将此属性重写为 display: table

.table-responsive { display: table; }

注意：请确保在您的引导代码之后执行此样式以覆盖它。

Answer 7

由table-responsive类为表格提供display:block的属性，这很奇怪，因为这会覆盖table类原始display:table，并且添加table-responsive时表格收缩的原因。

很可能它的引导程序4仍然在开发中。您可以使用自己设置display:table的类来覆盖此属性，但不会影响表格的响应性。

e.g。

.table-responsive-fix{
   display:table;
}

Answer 8

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

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

Answer 9

这些答案均无效（日期为今天，2018年12月9日）。正确的解决方法是在表中添加.table-sensitive-sm：

<table class='table table-responsive-sm'>
[Your table]
</table>

这仅将响应性方面应用于SM视图（移动设备）。因此，在移动视图中，您可以按需要进行滚动；在较大视图中，表没有响应，因此可以按需要显示全宽。

文档：https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Answer 10

我发现在包装器中使用推荐的表响应类仍然会导致响应表水平（令人惊讶地）水平缩小：

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

这里，包装器将宽度设置为100％，以使每个Bootstrap的宽度越来越大。将table-lg类应用于table元素后，对于较大的表格和更大的表格，宽度也设置为100％，对于中的和较小的表格，宽度设置为992px。 table-xs，table-sm，table-md和table-xl类的工作方式相同。

Answer 11

对于Bootstrap 4.x，请使用显示实用程序：

w-100 d-print-block d-print-table

用法：

<table class="table w-100 d-print-block d-print-table">

Answer 12

通过包装任何.table来创建响应表 .table-sensitive {-sm | -md | -lg | -xl}，使表格滚动在不超过（但不包括）的每个最大宽度断点处水平分别为576px，768px，992px和1120px。

只需将表包装为.table-sensitive {-sm | -md | -lg | -xl}

例如

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

bootstrap 4 tables

Answer 13

似乎“ sr-only”元素及其在表中的样式是导致此错误的原因。至少我遇到了同样的问题，经过几个月的努力，我们才确定了原因，尽管我仍然不明白为什么。将left:0添加到“仅限sr”样式中即可解决此问题。

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

13 个答案: