HTML / CSS响应表

Question

我已经建立了一个简单的订单表格，包括交货，账单和银行账户持有人的地址。 现在，事物被格式化为一个大的HTML表格：

+---------+---------+----------+----------+
|         | DelAddr | BillAddr | BankAddr |
| Name    |         |          |          |
| Street  |         |          |          |
| City    |         |          |          |
| Country |         |          |          |
| Tel     |         |          |          |
+---------+---------+----------+----------+

当然，这在手机上没有响应并且看起来不正确，因为我使用的Wordpress模板是响应式的。

如何（如果可能没有JS），使表响应，以便当视口变小时，它看起来像

+---------+---------+
|         | DelAddr |
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+
|         | BillAddr|
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+
|         | BnkAddr |
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+

甚至可以单独使用CSS吗？ 难点是在每个“拆分”行上显示描述列。

Answer 1

Chris Coyer有一篇非常好的文章： 响应式数据表 。

这是一个引用：

最大的变化是我们将通过将每个与表相关的元素设置为块级来强制表不像表一样。 然后通过保持我们最初添加的斑马条纹，有点像每个表格行本身成为一个表格，但只有屏幕宽。 没有更多的水平滚动！ 然后对于每个“单元格”，我们将使用CSS生成的内容（：之前）来应用标签，因此我们知道每个数据位的含义。

Answer 2

你可以使用bootstrap它是完全免费的，非常适合响应式设计....并且我认为你不需要js。 它仍然包括它是一个伟大的图书馆