响应表中Twitter的引导

Question

处理当一个表格的宽度超过跨度的宽度，这样的页面：http://jsfiddle.net/rcHdC/

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

会是什么，以迎合这种情况下，最好的方法是什么？

Answer 1

可用的一个选项是fooTable。在响应网站的伟大工程，并允许您设置多个断点... fooTable Link

Answer 2

有很多不同的东西与响应表打交道时，你可以做。

我个人很喜欢这种方法由克里斯Coyier：

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

您可以在这里找到许多其他的替代品：

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

如果你可以利用引导并迅速得到的东西，你可以简单地使用类名“.hidden手机”和“.hidden片剂”隐藏某些行，但这种方法可能是最好的在许多情况下。更多信息（请参阅 “响应实用工具类”）：

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

Answer 3

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

Answer 4

如果您正在使用引导3以上，你可以通过updatingthe文件应用的响应表中的所有决议案：

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%; 
... 

注意我是如何改变的第一行@屏幕-XX值。

我知道让所有表响应听起来不是那么好，但我发现它非常有用的这个中启动的LG大表（大量列）。

希望它可以帮助别人。