responsive-design - 如何在移动设备上将表格列折叠成行？

Question

我正在开发一个以餐厅菜单为特色的网站。每件商品都有不同的尺寸，每件都有不同的价格。这使用表格显示在中型和大型设备上，每个价格都有一列:



在移动设备上，屏幕太窄，无法正确显示每个产品最多 4 种不同的尺寸。

所以我想将列折叠成行，每行都以列名开头:



使用响应式设计是否有可能发生这样的事情？我试图避免维护两种不同的 HTML 版本的内容，一种仅在移动设备上可见，另一种仅在较大的屏幕上可见。

我正在使用 Foundation 5，所以我理想情况下正在寻找使用这个网格系统的解决方案，但我真的对任何解决方案持开放态度。

Answer 1

解决方案包括制作表格单元格display: block在移动设备上，并添加 data-*每个单元格的属性，与列名匹配。

这个数据属性被注入(inject)到单元格的 ::before 中。带有 content: attr() 的伪元素.

例子:

<table>
    <thead>
        <tr>
            <th>Pasta</th>
            <th>Small</th>
            <th>Regular</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Spaghetti Bolognese</td>
            <td data-th="Small">£5.00</td>
            <td data-th="Regular">£7.00</td>
        </tr>
        <tr>
            <td>Lasagna</td>
            <td data-th="Small">£5.00</td>
            <td data-th="Regular">£7.00</td>
        </tr>
    </tbody>
</table>

CSS:

@media only screen and (max-width: 40em) {
    thead th:not(:first-child) {
        display: none;
    }

    td, th {
        display: block;
    }

    td[data-th]:before  {
        content: attr(data-th);
    }
}

您需要添加一些额外的 float让它漂亮。

工作示例: http://codepen.io/anon/pen/medrZo