显示中的引导响应表：表答案

【问题标题】：Bootstrap responsive table within display:table显示中的引导响应表：表
【发布时间】：2017-02-07 06:39:02
【问题描述】：

我有一个 Bootstrap 响应 table，它位于 div 和 CSS display:table 内。这似乎阻止了表格响应。如何在不更改外部 CSS 的情况下使表格响应？

JsFiddle

作为参考，display:table 用于创建“粘性页脚”：How to create a sticky footer that plays well with Bootstrap 3

【问题讨论】：

是 display:table 必须在代码中有吗？
是的，如前所述，它由粘性页脚使用，我无法轻易更改
它是响应式的但是您的项目太长了，所以它不会显示表格的其余部分

标签： css twitter-bootstrap

【解决方案1】：

如果您不想更改当前的 css，则必须使您的文本具有响应性以解决此问题。
设置font size 而不是px 使用vm、vw、vh 或vmin 这些后缀使您的文本响应。

【讨论】：

在桌子上设置font-size: 1vmin 是可行的，但它会使文本太小以至于无法阅读，这并不是一个很好的解决方案
使用font-size: 2vw
使用 2vw 会导致表格对于视口来说太大，导致整个页面水平滚动

【解决方案2】：

根据视口而不是百分比值设置container 的宽度：

@media (max-width: 768px) {
  .container {
    width: 100vw;
  }
}

Updated Fiddle

由于container 是引导程序中非常常见的类，您可以考虑将自定义类添加到要添加此样式的特定元素。

【讨论】：

有趣的解决方案，但我似乎仍然使用 100vw 获得一点整页水平滚动，而任何更少的东西都会产生一点边距

【解决方案3】：

试试这个，可能对你有帮助

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
  height: 100%;
  width: 100%;
  display: table;
}
.table-responsive {
    border: 1px solid #ddd;
    display: -moz-stack;
    margin-bottom: 15px;
    overflow-y: hidden;
    width: 100%;
}


</style>
</head>
<body>

<div class="content-container">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Bookings</h3></div>
          <div class="bookings_list">
            <div class="row">
              <div class="col-xs-12">
                <div class="table-responsive">
                  <table class="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Customer</th>
                        <th>Provider</th>
                        <th>Agent</th>
                        <th>Service</th>
                        <th>Status</th>
                        <th>Status</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="clickable" action="push" href="/bookings/UY6001">
                        <td>123</td>
                        <td>John Smith</td>
                        <td>ACME Corp</td>
                        <td>Mike</td>
                        <td>123456</td>
                        <td>Active</td>
                        <td>Active</td>
                        <td>Active</td>
                      </tr>
                      <tr class="clickable" action="push" href="/bookings/UY6000">
                        <td>123</td>
                        <td>John Smith</td>
                        <td>ACME Corp</td>
                        <td>Mike</td>
                        <td>123456</td>
                        <td>Active</td>
                        <td>Active</td>
                        <td>Active</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：

如果这里看不到响应式表格，只需复制我的代码并粘贴到记事本中，然后尝试