如果我的 table scrollable/responsive 有很多内容不适合我的屏幕，如何制作它？

Question

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

<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.
周围添加一个 .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>

这就是您获得 table 的方式，无论您有多少行/列，它都能很好地滚动。