带有水平滚动的引导响应表答案

【问题标题】：Bootstrap responsive table with horizonascroll带有水平滚动的引导响应表
【发布时间】：2014-08-18 22:44:10
【问题描述】：

我正在使用具有近一百列的 bootstrap 3 responsive-table。由于列数太多，我的电脑屏幕放不下。

根据响应式表格上的引导程序documentation，宽度为 768px 或更小的设备/屏幕将为这些表格提供水平滚动条，而其余的则不会。

有没有办法让滚动在笔记本电脑/台式机屏幕上也能正常工作？

【问题讨论】：

【解决方案1】：

您可以通过模仿自己的 CSS 来覆盖 Bootstrap 样式 table-responsive 类的方式。对于低于 768px 的分辨率，Bootstrap 应用了以下样式：

/* Bootstrap.css */
@media screen and (max-width: 767px) {
    ...

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #DDD;
    }
}

因此，如果您希望在大于 768 像素的分辨率上应用相同的行为，您可以简单地将其复制到您自己的样式中：

/* Your CSS */
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
}

【讨论】：

如果我在一个页面中显示 10 条记录，这可以工作，但是在一个页面中显示 100 条记录呢？表格垂直滚动不出现

【解决方案2】：

快速查看引导源代码会发现 table-responsive 的代码如下所示：

@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}

只需从 @media 复制所有内容并粘贴到您的 css 以覆盖引导程序，它应该可以工作：

http://jsfiddle.net/5mq2vd3s/

【讨论】：

【解决方案3】：

你可以这样做

<div class="container">
<div class="row data-table">
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
</div>
<style type="text/css">
.data-table{width:300px; overflow-x: scroll; overflow-y:hidden; }
</style>

参见此处Twitter bootstrap scrollable table

【讨论】：