使用 Twitter Bootstrap 在平板电脑上查看的 CSS 响应式表格答案

【问题标题】：CSS Responsive tables using Twitter Bootstrap viewed on tablet使用 Twitter Bootstrap 在平板电脑上查看的 CSS 响应式表格
【发布时间】：2014-03-13 13:36:56
【问题描述】：

我正在使用 Twitter Bootstrap CSS 创建一个响应式表格，它在桌面上看起来很正常，但在移动设备上是水平滚动的。

你可以在这里看到它：

http://www.bonhard.com/nastodolci/penzion/ceny/

我使用的 CSS 是这样的：

 @media (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -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;
  }
}

现在这在桌面和移动设备上运行良好。然而在平板电脑上它显示很有趣。将窗口大小调整为 1024x768 来检查一下

您知道我是否可以调整媒体查询值以使其在平板电脑上的行为与在移动设备上的行为相同？

非常感谢！

菲尔

【问题讨论】：

你可以把你的桌子包裹在<div class='col-sm-12'></div>

标签： html css twitter-bootstrap

【解决方案1】：

请将此代码添加到 css 文件中..

@media (max-width: 1052px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
}

【讨论】：

我刚刚将媒体查询值更改为 1050px，它就像一个魅力！谢谢！菲尔

【解决方案2】：

添加另一个@media (max-width: 1024px) {} ??以 1024px 响应

【讨论】：