Html 带有horizo​​nascroll的Bootstrap响应表

Bootstrap responsive table with horizonascroll

提问by Abhishek

I am using a bootstrap 3 responsive-tablewith nearly a hundred columns. Since the number of columns are too many, it does not fit into my computer screen.

我正在使用responsive-table带有近一百列的引导程序 3 。由于列数太多，它不适合我的电脑屏幕。

According to the bootstrap documentationon responsive tables, a device/screen with 768pxwide or less will have a horizontal scroll bar for these tables and the rest will not.

根据响应式表格的引导文档，宽度为768 像素或更小的设备/屏幕将为这些表格提供水平滚动条，其余的则不会。

Is there a way to make the scroll work even on a laptop/desktop screens?

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

回答by James Donnelly

You can just override the way Bootstrap styles table-responsiveclass by imitating its own CSS. For resolutions lower than 768px, Bootstrap has the following style applied:

您可以table-responsive通过模仿自己的 CSS来覆盖 Bootstrap 样式类的方式。对于低于 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;
    }
}

Therefore, if you want the same behaviour to apply on resolutions larger than 768px, you can simply duplicate this in your own styling:

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

/* 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;
}

回答by kamil

Quick look at bootstrap source shows that code for table-responsivelooks like this:

快速查看引导源代码显示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;
  }
}

Just copy everything from @mediaand paste to your css to override bootstrap's, it should work:

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

http://jsfiddle.net/5mq2vd3s/

http://jsfiddle.net/5mq2vd3s/

回答by Md. Salahuddin

You can do it this way

你可以这样做

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

see here also Twitter bootstrap scrollable table

另见此处Twitter 引导程序可滚动表