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

Question

I am designing a mobile first layout.

In the layout I have a table which I have each row made into a column on mobile.

Then on desktop I want to convert the table back to work as a standard table layout, but everything I try fails.

Please see my fiddle here

Can anyone explain to me how I return the CSS of the table to act like a "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

I know you are designing a mobile first layout, but a easy way to do this is if you change your mediaquery from min-width:48em to max-width:48em and insert the CSS table code inside the mediaquery like this:

Snippet

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