仅在移动设备上使用 CSS 的特定表格视图

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代码（例如：做两张表，用媒体查询隐藏一张)，我只想用 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; }
}

Answer 2

你能做到吗？

<div>Full table:</div>
 <table id="desktop">
  <thead>....

 <table id="mobile">
  <thead>....

@media only screen and (min-device-width: 768px){
 #desktop{
  display:block;
 }
 #mobile{
  display:none;
 }
}
@media only screen and (min-device-width: 480px){
 #desktop{
  display:none;
 }
 #mobile{
  display:block;
 }
}