html - 移动设备上的按列响应表

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 在这方面非常擅长，它会根据视口(viewport)宽度显示/隐藏列，并为您换行。