Twitter Bootstrap中的响应式表格处理

当一个表的宽度超过了跨度的宽度,就像这个页面: http : //jsfiddle.net/rcHdC/

你会看到表格的内容超出了span

怎样才能迎合这种情况呢?

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

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

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

我个人喜欢Chris Coyier的这个方法:

你可以在这里find许多其他的select:

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

如果使用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的值。

我知道使所有的表响应可能听起来不错,但我发现它非常有用,这使得在大型表(大量的列)上的LG。

希望它可以帮助别人。