84

When a table's width exceed the span's width, like this page: http://jsfiddle.net/rcHdC/

You will see the table's content is outside of the span.

What would be the best method to cater this case?

4

4 回答 4

153

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;
}
于 2013-08-21T00:32:54.290 回答
21

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

于 2013-03-03T11:07:35.257 回答
18

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

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

您可以在此处找到许多其他替代方案：

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

于 2013-06-20T08:29:15.370 回答
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 值的。

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

希望它可以帮助某人。

于 2014-03-17T13:57:20.430 回答