撤消 CSS 规则以使 table 行从列恢复为行

Question

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

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

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

请看我的fiddlehere

谁能向我解释一下 return table 的 CSS 如何表现得像 "normal" 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

将你所有的 css 包裹起来，也就是我理解的 css 移动设备

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
}

默认情况下，table 将显示为标准 table，只有较小的屏幕才会应用响应式布局。

Answer 2

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

片段

@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>

撤消 CSS 规则以使 table 行从列恢复为行

Undoing CSS rules to make table rows from columns back to rows

html

css

html-table

media-queries

片段