twitter-bootstrap 引导程序中具有多列的响应表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22607663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
responsive table with multiple columns in bootstrap
提问by Bogdan
I was trying to find an answer as for "nth" amount of columns in a table of bootstrap. Some guys asked it before but still there has been no solution. So, my question is how to manage with the responsiveness of columns. Let's say I have 5 colunms with its own names. | the streets' names | Victoria | Lombard | Champs-Elysées | Chervonoarmeyskaya | (without abbreviation, as a reader has to understand)
我试图在 bootstrap 表中找到“第 n”个列的答案。之前有人问过，但是一直没有解决办法。所以，我的问题是如何管理列的响应能力。假设我有 5 列有自己的名字。| 街道名称| 维多利亚 | 伦巴第 | 香榭丽舍大街 | 切尔沃诺阿尔梅斯卡亚 | （没有缩写，读者必须理解）
My solution were:
我的解决方案是：
a) Playing with font-size, making it smaller to adapt it to 320px size. but succeed with 480px (at least for readable size).
a) 使用 font-size，使其更小以适应 320px 大小。但成功使用 480px（至少对于可读大小）。
b) Removing all padding at ".table thead > tr > th, .table tbody > tr > th," with @media (max-width: 480px) to get more space.
b) 使用@media (max-width: 480px) 移除“.table thead > tr > th, .table tbody > tr > th”处的所有填充以获得更多空间。
c) and the last one is to add condition like (switching automatically the screen size if "320px, 360px" onto "480px, 640px").
c）最后一个是添加条件（如果“320px，360px”自动切换屏幕大小到“480px，640px”）。
I don't know if it's good idea?
不知道好不好？
will it work correctly on all small devices like iphone, ipod, samsung ..., nokia ..., sony etc... with cross-browser compatibility? if so how to realize it?
它是否可以在所有小型设备上正常工作，例如 iphone、ipod、samsung ...、nokia ...、sony 等...具有跨浏览器兼容性？如果是这样如何实现呢？
here is my code:
这是我的代码：
<table class="table table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr class="alert alert-info">
<th>the streets' names</th>
<th>Victoria</th>
<th>Lombard</th>
<th>Champs-Elysées</th>
<th>Chervonoarmeyskaya</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location</td>
<td>Australia</td>
<td>United States</td>
<td>France</td>
<td>Ukraine</td>
</tr>
</tbody>
</table>
</table>
P.S. If someone will find solution, consider about 7-10 columns. Thanks.
PS 如果有人会找到解决方案，请考虑大约 7-10 列。谢谢。
回答by Subtletree
I don't know about working with standard tables in bootstrap but have come across a couple of plugins that work really well with making tables responsive.
我不知道如何在 bootstrap 中使用标准表，但遇到了几个插件，它们可以很好地使表具有响应性。
I haven't actually used FooTables but it looks awesome. It collapses specified columns into expandable section.
我实际上没有使用过 FooTables，但它看起来很棒。它将指定的列折叠为可展开部分。
Datatables(responsive version)
数据表（响应式版本）
This i have used and uses the same functionality of FooTablesbut with the Datatableslook and api. The link shows specifically how to integrate with bootstrap.
我已经使用并使用了与FooTables相同的功能，但具有Datatables外观和 api。该链接具体显示了如何与引导程序集成。
回答by Nick N.
I guess the best solution in this case for small devices is to just hide some less important columns. Offer an option to see more columns, but let the users realize they will get a scrollbar.
我想在这种情况下对于小型设备的最佳解决方案是隐藏一些不太重要的列。提供查看更多列的选项，但让用户意识到他们将获得滚动条。
It's simply not nicely possible to put that many columns on such a small screen. It is also pretty accepted that mobile versions show less or show it in a different way.
在这么小的屏幕上放置那么多列简直是不可能的。移动版本显示较少或以不同方式显示也很受欢迎。
回答by donnapep
I think this question has less to do with Bootstrap and more to do with selecting an approach to use for responsive tables in general. Here are some methods that I've tried before to deal with tables at small resolutions:
我认为这个问题与 Bootstrap 关系不大，而更多地与选择一种用于响应式表的方法有关。以下是我之前尝试过的一些处理小分辨率表格的方法：
- Using Bootstrap's
table-responsiveclass and just having a horizontal scrollbar. - Hiding less important columns as per this techniquedocumented by Filament Group.
- Reformatting the table using CSS so that it no longer resembles a table at all as per this methodby Chris Coyier.
- 使用 Bootstrap 的
table-responsive类并且只有一个水平滚动条。 - 根据 Filament Group 记录的这项技术隐藏不太重要的列。
- 使用 CSS 重新格式化表格，使其不再像Chris Coyier 的这种方法中的表格。
There are also some other responsive tableoptions. The one you select will likely depend upon the context of your site and personal preference.
还有一些其他响应式表格选项。您选择的那个可能取决于您网站的上下文和个人偏好。
回答by user956731
One way to do this would be with a horizontal jQuery accordian. Here's an example using picturesand you could use it to display one column of your table at a time.
一种方法是使用水平的 jQuery 手风琴。这是一个使用图片的示例，您可以使用它一次显示表格的一列。
回答by Rafik Bari
Just use the responsive option to deal with many columns. https://github.com/DataTables/ResponsiveInclude dataTables with the right bootstrap version and then:
只需使用响应式选项来处理许多列。 https://github.com/DataTables/Responsive包含具有正确引导程序版本的数据表，然后：
$('#table').DataTable(
{
responsive: true
}
);
