移动设备上的列响应表

Question

我有一张如下所示的表格

+--------------------------------------+
|  Title A   |   Title B  |   Title C  | 
+------------+------------+------------+
| Content A1 | Content B1 | Content C1 |
+------------+------------+------------+
| Content A2 | Content B2 | Content C2 |
+------------+------------+------------+

JSFiddle

并希望将此表格式化为移动设备上的视图，如

+------------+
|  Title A   |
+------------+
| Content A1 |
+------------+
| Content A2 |
+------------+
+------------+
|  Title B   |
+------------+
| Content B1 |
+------------+
| Content B2 |
+------------+
+------------+
|  Title C   |
+------------+
| Content C1 |
+------------+
| Content C2 |
+------------+

这可能与CSS有关吗？提前谢谢！

Answer 1

您是否有权更改HTML，或者您是否只想更改CSS？

如果您可以更改HTML：

JSFiddle：http://jsfiddle.net/g8m22kLu/11/ （请调整jsfiddle窗口的大小以堆叠表格）

正如Dreamwalker所提到的，bootstrap非常擅长这一点，它将按视口宽度显示/隐藏列，并为你设置列。

Answer 2

是的，您可以使用CSS完成此操作。但是，您要进一步整合响应式设计框架，我喜欢使用http://getbootstrap.com/

然后，所有显示设备的显示设置都更加一致。