Twitter Bootstrap 中的响应式表处理答案

【问题标题】：Responsive table handling in Twitter BootstrapTwitter Bootstrap 中的响应式表处理
【发布时间】：2023-04-04 03:13:01
【问题描述】：

当表格的宽度超过 span 的宽度时，比如这个页面：http://jsfiddle.net/rcHdC/

你会看到表格的内容在span之外。

解决这种情况的最佳方法是什么？

【问题讨论】：

你希望发生什么？

标签： html twitter-bootstrap css

【解决方案1】：

Bootstrap 3 现在有开箱即用的响应表。万岁！ :)

您可以在这里查看：https://getbootstrap.com/docs/3.3/css/#tables-responsive

在你的桌子周围添加一个<div class="table-responsive">，你应该很高兴：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

要使其适用于所有布局，您可以这样做：

.table-responsive
{
    overflow-x: auto;
}

【讨论】：

但它只适用于小型设备（768px以下）：S来源：getbootstrap.com/css/#tables-responsive
要在所有尺寸的布局上启用此功能，您只需从foundation_and_overrides.css.scss 文件中的768 块中删除响应式样式即可。类似 ``` .table-responsive { width: 100%;溢出-y：隐藏；溢出-x：滚动； -ms-溢出样式：-ms-autohiding-scrollbar； -webkit-溢出滚动：触摸； } ```
@ase69s 检查我更新的答案。刚才我需要它放在有很多列的桌子上。在自定义 CSS 文件中添加 overflow-x: auto 可以实现更大的显示布局。
您可能还想将边框添加到该样式定义中，以保持一致性：border: 1px solid #dddddd;
可能还想添加.table-responsive td, .table-responsive th { white-space:nowrap; } 以确保单元格不会自动缩小并添加换行符。

【解决方案2】：

如果您使用的是 Bootstrap 3 和 Less，您可以通过更新文件将响应式表格应用于所有分辨率：

tables.less

或覆盖这部分：

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

与：

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

注意我是如何更改第一行 @screen-XX 值的。

我知道让所有表格都响应可能听起来不太好，但我发现在大型表格（很多列）上启用此功能非常有用。

希望对某人有所帮助。

【讨论】：

【解决方案3】：

在处理响应式表格时，您可以做很多不同的事情。

我个人喜欢 Chris Coyier 的这种方法：

http://css-tricks.com/responsive-data-tables/

您可以在此处找到许多其他选择：

如果您可以利用 Bootstrap 并快速获得一些东西，您可以简单地使用类名“.hidden-phone”和“.hidden-tablet”来隐藏一些行，但这种方法在许多情况下可能是最好的。更多信息（参见“响应式实用程序类”）：

http://twitter.github.io/bootstrap/scaffolding.html#responsive

【讨论】：

为 Coyer 链接 +1。我过去使用它效果很好。
是的，Chris Coyer 的解决方案非常简洁。比 bootstrap 或 zurbfoundation 提供的要好得多（它们只是添加水平滚动）。
截至 2016 年 1 月，Coyier 和其他人的响应式东西已经 5 到 6 年了，在所有人开始使用 Twitter Bootstrap 之前。

【解决方案4】：

一个可用的选项是 fooTable。在响应式网站上效果很好，并允许您设置多个断点...fooTable Link

【讨论】：

FooTable is now built to work with Twitter Bootstrap out of the box.