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

【问题标题】：How to fold table columns into rows on mobile devices?如何在移动设备上将表格列折叠成行？
【发布时间】：2015-11-24 21:29:18
【问题描述】：

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

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

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

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

我正在使用 Foundation 5，因此我希望找到使用此网格系统的解决方案，但我真的愿意接受任何解决方案。

【问题讨论】：

每个产品都重复 Small 和 Large。所以我猜你必须使用 Foundation 的 visibility 类。

标签： responsive-design zurb-foundation zurb-foundation-5

【解决方案1】：

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

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

例子：

<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

【讨论】：

要使 codepen 示例工作，您需要使用和标签包装所有 HTML。

【解决方案2】：

上述结果的 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;
}

}

【讨论】：