html - 仅在移动设备上使用 CSS 的特定表格 View

Question

我有一个表格布局，它在桌面上看起来不错 (769px+)。

<table>
<thead>
    <th colspan="2">Product</th>
    <th>Unit Price</th>
    <th>Qty</th>
    <th>Subtotal</th>
    <th>&nbsp;</th>
</thead>
<tbody>
    <tr>
        <td>Image</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>31.23 USD</td>
        <td>2 pcs</td>
        <td>62.46 USD</td>
        <td><a href="#">x</a></td>
    </tr>
    <tr>
        <td>Image</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>31.23 USD</td>
        <td>2 pcs</td>
        <td>62.46 USD</td>
        <td><a href="#">x</a></td>
    </tr>
    <tr>
        <td>Image</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>31.23 USD</td>
        <td>2 pcs</td>
        <td>62.46 USD</td>
        <td><a href="#">x</a></td>
    </tr>
</tbody>

但我希望这在我的手机(和平板电脑)(768px-)上有点不同。

这是一个 JSFiddle 示例:http://jsfiddle.net/etd89po5/

可以看到:当前表在上图，我想要和下表一样的外观，但是不想重复HTML代码(比如:做两个表，用media query隐藏一个), 我只想用 CSS 来做这件事。

如果有必要，我可以将表格元素更改为 div。

有什么想法吗？

Answer 1

将其保存为 <table>绝对是为了可访问性。在较小尺寸的媒体查询中，您可以执行以下操作:

@media all and (max-width: 768px) {
    tr { display: block; border: 1px solid grey; padding: 1em; text-align: center; }
    td { display: inline; padding: 0 .5em; }
}

但这不会强制换行。解决这个问题的最简单方法是添加 <br>元素添加到您的第二个单元格并将其隐藏在您的桌面 CSS 中:

td>br { display: none; }
@media all and (max-width: 768px) {
    td>br { display: block; }
}