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

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



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

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



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

我正在使用Foundation 5，因此理想情况下是在寻找使用此网格系统的解决方案，但实际上我愿意接受任何解决方案。

最佳答案

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

此数据属性通过::before注入(inject)到单元格的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

关于responsive-design - 如何在移动设备上将表列折叠成行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32301206/