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

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

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

因此，我想将列折叠成行，每行以列名开头：

使用响应性设计是否有类似的可能性？我试图避免维护两个不同的HTML版本的内容，一个只在手机上可见，另一个只在大屏幕上可见

---

我使用基础5，所以我很理想地使用这个网格系统寻找解决方案，但是我对任何解决方案都很开放。

< p>解决方案涉及在移动设备上制作表格单元<代码>显示：块< /代码>，并将<代码>数据*<代码>属性添加到每个单元格中，匹配列名。

此数据属性被注入到单元格的

：：before

伪元素中，并带有

内容：attr（）

例如：

意大利面食
小的
有规律的
意大利肉酱面
£5.00
£7.00
烤宽面条
£5.00
£7.00

CSS:

@仅媒体屏幕和（最大宽度：40em）{
第四个孩子：不是（第一个孩子）{
显示：无；
}
td，th{
显示：块；
}
td[数据th]：之前{
内容：attr（数据传输）；
}
}

您需要添加一些额外的

float

，以使其美观

---

工作示例：

CSS更改上述结果

table {
    border-spacing: 0;
    }

    td,
    th {
    padding: 0.5em;
    }

    th {
    font-weight: bold;
    text-align: left;
    }

    thead th {
    background-color: #999;
    color: white;
    }

    td > div {
    float: right;
    }
@media screen and (max-width: 885px) {
thead th:not(:first-child) {
    display: none;
}

thead th:first-child:after {
    content: "'s";
}

td, th {
    display: block;
    width: 100% !important;
}
td:first-child {
    font-weight: bold;
}

td[data-th]:before {
    content: attr(data-th);
    border-radius: 10px 0px 0px 10px;
    font-weight: bold;
    min-width: 10rem;
    display: inline-block;
}

}

每种产品都要重复小的和大的步骤。所以我想您必须使用foundation的可见性类。