0

我已经建立了一个简单的订单表格，其中包含交货、账单和银行账户持有人的地址。现在这个东西被格式化为一个大的 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 吗？困难在于在每个“拆分”行上显示描述列。

4

2 回答 2

2

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

这是一个报价：

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

于 2013-02-01T18:10:25.247 回答
0

您也许可以使用引导程序，它是完全免费的，非常适合响应式设计......而且我认为您不需要 js。仍然包含它，它是一个很棒的库

于 2013-02-01T22:43:33.433 回答