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

Question

我在我的面板中添加了一个 overflow-x:scroll，因为我的表中有很多列，滚动效果很好。但是面板标题的蓝色停在页面的右侧；在那之后面板标题的右边是白色的，看起来很糟糕。如何使蓝色面板标题向右拉伸(stretch)，使其不会在页面右侧截断？

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

来自bootstrap documentation :

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

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

无论您有多少行/列，您都可以通过这种方式获得一个可以很好滚动的表格。