如果我的表格有许多不适合我的屏幕的内容，如何使我的表格可滚动/响应？

Question

我overflow-x:scroll在面板中添加了，因为我的表格中有很多列，这对于滚动效果很好。但是面板标题的蓝色停止在页面的右侧；之后，面板标题是白色的，看起来很糟糕。如何使蓝色面板标题向右拉伸，使其不只是在页面的右侧被切断？

<div class="panel panel-primary" style="overflow-x:scroll">
    <div class="panel-heading">Heading</div>
        <table class="table table-striped">
            <tr>
                <th></th>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

Answer 1

1. 不要像使用overflow-x: scroll;那样添加内联样式。
2. 解决您的问题的方法是.table-responsive在您的桌子周围添加一个div。

从引导程序文档：

通过将任何 .table 包装在 .table-responsive 中来创建响应式表格，使它们在小型设备（768px 以下）上水平滚动。在宽度大于 768 像素的任何物体上查看时，您不会在这些表格中看到任何差异。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div class="panel-heading">Heading</div>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这就是你如何获得一个无论你有多少行/列都能很好地滚动的表格。