Twitter Bootstrap中的响应表处理

84

当表格的宽度超过跨度的宽度时，请参见此页面：http : //jsfiddle.net/rcHdC/

您会看到表格的内容不在的范围内span。

迎合这种情况的最佳方法是什么？

html twitter-bootstrap css

— 瑞安
source

您想发生什么事？

— cimmanon

153

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

您可以在此处进行检查：https : //getbootstrap.com/docs/3.3/css/#tables-sensitive

添加一个<div class="table-responsive">桌子周围，您应该会很好：

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

要使其适用于所有布局，您可以执行以下操作：

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

— 列尼尔·马卡费里
source

7

但这仅适用于小型设备（768像素

— VSP

1

要在所有尺寸的布局上启用此功能，您只需将响应样式从768块拖放到foundation_and_overrides.css.scss文件中。像```.table-sensitive {width：100％; 溢出y：隐藏；溢出x：滚动; -ms-overflow-style：-ms-autohiding-scrollbar; -webkit-overflow-scrolling：触摸；}```

— genkilabs

3

@ ase69s检查我更新的答案。刚才我需要在具有许多列的表上使用它。添加overflow-x: auto自定义CSS文件可以解决较大的显示布局。

— Leniel Maccaferri

为了一致性，您可能还希望将边界添加到该syle定义中：border: 1px solid #dddddd;

— ptim

2

可能还需要添加.table-responsive td, .table-responsive th { white-space:nowrap; }以确保单元格不会自动缩小并添加换行符。

— rybo111 2014年

21

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

— f
source

FooTable现在可以与Twitter Bootstrap一起使用。

— shasi kanth 2014年

18

处理响应表时，您可以执行许多不同的操作。

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

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

您可以在这里找到许多其他选择：

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

http://twitter.github.io/bootstrap/scaffolding.html#响应

— 路易斯·埃弗里辛
source

5

为Coyer链接+1。我过去曾用过它，效果很好。

— Fetchez la vache

是的，Chris Coyer的解决方案非常简洁。比bootstrap或zurbfoundation提供的效果要好得多（它们只是添加了水平滚动）。

— Adrien Be

截止到2016年1月，在每个人都开始使用Twitter Bootstrap之前，Coyier和其他用户的响应性产品已有5至6年的历史。

— Andrew Koper

1

如果您使用的是Bootstrap 3及以下版本，则可以通过更新文件将响应表应用于所有分辨率：

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

我知道让所有表都具有响应能力可能听起来不太好，但是我发现在大型表（很多列）上将其启用到LG极为有用。

希望它能帮助某人。

— 毛里西奥
source