html - 撤消 CSS 规则以使表格行从列变回行

Question

我正在设计移动设备优先的布局。

在布局中，我有一个表格，我在移动设备上将每一行制作成一列。

然后在桌面上我想将 table 转换回标准表格布局，但我尝试的一切都失败了。

请看我的 fiddle here

任何人都可以向我解释如何返回 table 的 CSS 以使其像“普通”table 一样运行吗？

CSS:

table.basket-items, thead, tbody, td, tr { 
    display: block; 
}

table.basket-items {
    position: relative;
}

thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr {
    margin-bottom: 2em;
    background: rgba(204, 204, 204, 0.15);
}

td { 
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding: 0.8em  0.8em 0.8em 50%; 
    text-align: right;      
}

td:before { 
    position: absolute;
    top: 0.8em;
    left: 0.8em;
    width: 45%; 
    padding-right: 10px;
    text-align: left;
}

td:nth-of-type(1):before { content: "Product"; }
td:nth-of-type(2):before { content: "Price"; }
td:nth-of-type(3):before { content: "Qty"; }
td:nth-of-type(4):before { content: "Totals"; }

@media only screen and (min-width: 48em) {

  // Not sure how to make it back to a table

}

Answer 1

我知道您正在设计移动优先布局，但一个简单的方法是将 mediaquery 从 min-width:48em 更改为 max-width:48em 并在 mediaquery 中插入 CSS 表格代码，如下所示:

片段

@media only screen and (max-width: 48em) {
  table.basket-items,
  thead,
  tbody,
  td,
  tr {
    display: block;
  }
  table.basket-items {
    position: relative;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    margin-bottom: 2em;
    background: rgba(204, 204, 204, 0.15);
  }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 0.8em 0.8em 0.8em 50%;
    text-align: right;
  }
  td:before {
    position: absolute;
    top: 0.8em;
    left: 0.8em;
    width: 45%;
    padding-right: 10px;
    text-align: left;
  }
  td:nth-of-type(1):before {
    content: "Product";
  }
  td:nth-of-type(2):before {
    content: "Price";
  }
  td:nth-of-type(3):before {
    content: "Qty";
  }
  td:nth-of-type(4):before {
    content: "Totals";
  }
}

<table class="basket-items">
  <thead>
    <tr>
      <td class="product">
        <p>Product</p>
      </td>
      <td class="price">
        <p>Price</p>
      </td>
      <td class="qty">
        <p>Qty</p>
      </td>
      <td class="totals">
        <p>Total</p>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="product">
        Title
      </td>
      <td class="price">£10.00</td>
      <td class="qty">
        <input name="qty" value="1" />
      </td>
      <td class="totals">£10.00</td>
    </tr>
    <tr>
      <td class="product">
        Title
      </td>
      <td class="price">£20.00</td>
      <td class="qty">
        <input name="qty" value="1" />
      </td>
      <td class="totals">£20.00</td>
    </tr>
  </tbody>
</table>