我已经制作了一个简单的订单表，其中包含送货、账单和银行账户持有人的地址。 现在这个东西被格式化为一个大的 HTML 表格:
+---------+---------+----------+----------+
| | DelAddr | BillAddr | BankAddr |
| Name | | | |
| Street | | | |
| City | | | |
| Country | | | |
| Tel | | | |
+---------+---------+----------+----------+
当然这不是响应式的，而且在手机上看起来不正确，因为我使用的 Wordpress 模板是响应式的。
我如何(如果可能的话不用 JS)使表格响应，以便当视口(viewport)变小时它看起来像
+---------+---------+
| | DelAddr |
| Name | |
| Street | |
| City | |
| Country | |
| Tel | |
+---------+---------+
| | BillAddr|
| Name | |
| Street | |
| City | |
| Country | |
| Tel | |
+---------+---------+
| | BnkAddr |
| Name | |
| Street | |
| City | |
| Country | |
| Tel | |
+---------+---------+
单独使用 CSS 有可能吗？困难在于在每个“拆分”行上显示描述列。
最佳答案
Chris Coyer 对此有一篇非常好的文章:Responsive Data Tables .
引用一段话:
The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it's kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each "cell", we'll use CSS generated content (:before) to apply the label, so we know what each bit of data means.
关于HTML/CSS 响应表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14652427/