Stack table cells one above each other two by two - Woocommerce

Louis
August 20, 2020
194 views
1 vote
2 Answers

In an HTML table, I’d like the 2nd and 3rd cell to be one above each other, as well as the the 4th and 5th, but the first cell must occupy the whole height of the row.

How to achieve this using CSS (I can’t change the html markup)?

table.shop_table_responsive tbody tr.cart_item td.product-name,
table.shop_table_responsive tbody tr.cart_item td.product-quantity,
table.shop_table_responsive tbody tr.cart_item td.product-subtotal,
table.shop_table_responsive tbody tr.cart_item td.product-remove {
  display: block;
}

table.shop_table_responsive tbody tr.cart_item td.product-thumbnail {
  max-width: 92px;
}

table.shop_table_responsive tbody tr.cart_item td.product-name {
  min-width: 170px;
}

<table class="shop_table_responsive">
  <tbody>
    <tr class="woocommerce-cart-form__cart-item cart_item">
      <td class="product-thumbnail">
        <a href="https://staging.mysite.com/fr/eshop/henleys-fr/henley-harri-stone/">
          <img width="324" height="324" src="https://staging.mysite.com/wp-content/uploads/harri-stone-mysite-692X692-01-324x324.jpg">
        </a>
      </td>
      <td class="product-name" data-title="Produit" style="
             width: 150px;
             display: block;
             ">
        <div class="cart_product_name"><a href="https://staging.mysite.com/fr/"><span class="cat_product_name_word1">Henley</span> <span class="cat_product_name_word2">Harri</span></a></div>
        <div class="cart_product_color"><a href="https://staging.mysite.com/fr"> Stone</a></div>

      </td>
      <td class="product-quantity" data-title="Quantité">
        <div class="quantity wbu-quantity" dir="ltr">
          <a href="">-</a>
          <label class="screen-reader-text" for="qty_prod_34745_var_34763">quantité de Henley Harri - Stone</label>
          <input type="number">
          <a href="">+</a>
        </div>
      </td>
      <td class="product-subtotal" data-title="Sous-total" style="
             clear: both;
             ">
        <span class="woocommerce-Price-amount amount">70<span class="woocommerce-Price-currencySymbol"> EUR</span></span>
      </td>
      <td class="product-remove">
        <a href="www.google.com">×</a>
      </td>
    </tr>
  </tbody>
</table>

I know I can use display: block;on 2, 3, 4 and 5. But how to be sure that 4 is at the top ?

Tags: css html

Answers

Chosen as BEST ANSWER

ok this is exaclty what I needed, for those interested, you can achieve it this way, using flexbox, setting the height of the row, and using flex-direction: column and flex-wrap: wrap; as follows:

   .box {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.box>* {
    flex: 1 1 auto;
    border: 1px solid black;
}
.box div.one{
  height: 300px;
}
.box div.two,
.box div.three,
.box div.four,
.box div.five
{
  height: 148px;
}

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

(Edit)

To do what you want you need to change the display of the table row. You can use either flex or grid for this. Below I have demonstrated using grid, with fixed widths of 33% for the columns, but changing this to "322px auto auto" will allow the thumbnail to be the correct width and the other columns to adjust automagically. By using Grid I have specified where I want the various cells to appear by using the grid-xxx-start/end properties.

table.shop_table_responsive tbody tr.cart_item {
  display: grid;
  grid-template-rows: 50fr 50fr;
  grid-template-columns: 33fr 33fr 33fr;
}

table.shop_table_responsive tbody tr.cart_item td.product-thumbnail {
  max-width: 92px;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

table.shop_table_responsive tbody tr.cart_item td.product-quantity {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

table.shop_table_responsive tbody tr.cart_item td.product-name {
  min-width: 170px;
}

<table class="shop_table_responsive">
  <tbody>
    <tr class="woocommerce-cart-form__cart-item cart_item">
      <td class="product-thumbnail">1
        <a href="https://staging.mysite.com/fr/eshop/henleys-fr/henley-harri-stone/">
          <img width="324" height="324" src="https://staging.mysite.com/wp-content/uploads/harri-stone-mysite-692X692-01-324x324.jpg">
        </a>
      </td>
      <td class="product-name" data-title="Produit" style="
             width: 150px;
             display: block;
             ">2
        <div class="cart_product_name"><a href="https://staging.mysite.com/fr/"><span class="cat_product_name_word1">Henley</span> <span class="cat_product_name_word2">Harri</span></a></div>
        <div class="cart_product_color"><a href="https://staging.mysite.com/fr"> Stone</a></div>

      </td>
      <td class="product-quantity" data-title="Quantité">3
        <div class="quantity wbu-quantity" dir="ltr">
          <a href="">-</a>
          <label class="screen-reader-text" for="qty_prod_34745_var_34763">quantité de Henley Harri - Stone</label>
          <input type="number">
          <a href="">+</a>
        </div>
      </td>
      <td class="product-subtotal" data-title="Sous-total" style="
             clear: both;
             ">4
        <span class="woocommerce-Price-amount amount">70<span class="woocommerce-Price-currencySymbol"> EUR</span></span>
      </td>
      <td class="product-remove">5
        <a href="www.google.com">×</a>
      </td>
    </tr>
  </tbody>
</table>

For additional information, I recommend A Complete Guide to CSS Grid

Please signup or login to give your own answer.

Click here to cancel reply.

Stack table cells one above each other two by two – Woocommerce

Answers