我正在开发一个以餐厅菜单为特色的网站。每件商品都有不同的尺寸,每件都有不同的价格。这使用表格显示在中型和大型设备上,每个价格都有一列:
在移动设备上,屏幕太窄,无法正确显示每个产品最多 4 种不同的尺寸。
所以我想将列折叠成行,每行都以列名开头:
使用响应式设计是否有可能发生这样的事情?我试图避免维护两种不同的 HTML 版本的内容,一种仅在移动设备上可见,另一种仅在较大的屏幕上可见。
我正在使用 Foundation 5,所以我理想情况下正在寻找使用这个网格系统的解决方案,但我真的对任何解决方案持开放态度。
最佳答案
解决方案包括制作表格单元格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
关于responsive-design - 如何在移动设备上将表格列折叠成行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32301206/