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

Question

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

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

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

有可能使用响应式设计吗？我试图避免维护两个不同的HTML版本的内容,一个只在移动设备上可见,一个只在大屏幕上可见.

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

Answer 1

解决方案涉及display: block在移动设备上制作表格单元格,并data-*为每个单元格添加属性,以匹配列名称.

此数据属性将注入到单元格的::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