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：
- http://css-tricks.com/responsive-data-table-roundup/
- http://bradfrost.github.io/this-is-responsive/patterns.html#tables
如果您可以利用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。
希望它可以帮助别人。
