Collapse a responsive table layout using divs to 2 columns on small screens

Question

Currently have the below div table created, How do I get columns |3| and |4| to go under |1| and |2| respectively, dependent on width.

Current result:
|1| |2| |3| |4|
|1| |2| |3| |4|

Desired result:
|1| |2|
|1| |2|
|3| |4|
|3| |4|
or
|1| |2|
|3| |4|
|1| |2|
|3| |4|

.product-info-table{
    display: table;
    width: 100%;
}

.product-info-table-body {
    display: table-row-group;
}

.product-info-table-row {
    display: table-row;
}

.product-info-table-cell {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}

    
    
        
            Heading
            Text
            Heading
            Text
        
        
            Heading
            Text
            Heading
            Text
        
              
            Heading
            Text
            Heading
            Text
        
              
            Heading
            Text
            Heading
            Text

FluffyKitten · Accepted Answer

You can use media queries to detect the screen width and then use grid layout instead of table layout on small screens.

I'd also suggest adding the CSS for "mobile-first" i.e. the default CSS is for mobile displays, and then detect larger screens in the media query and apply your table table layout. To do this:

Add CSS for grid layout on the product-info-table-row - the rest of the divs just need the default display, so you don't need to add anything else (except any styling you want to apply, e.g. borders on the cells)
```
.product-info-table-row {
  display: grid;
  /* Display as 2 columns: col 1 has width 30%, col 2 is allocated the rest */
  grid-template-columns: 30% auto;
}
```

Wrap you existing table layout css in a suitable media query, e.g.

@media screen and (min-width: 600px) {
    /* Your existing table-display CSS goes here */
}

That's it! Working Example:

.product-info-table-row {
  display: grid;
  grid-template-columns: 30% auto;
}

.product-info-table-cell {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

@media screen and (min-width: 600px) {
  .product-info-table {
    display: table;
    width: 100%;
  }
  .product-info-table-body {
    display: table-row-group;
  }
  .product-info-table-row {
    display: table-row;
  }
  .product-info-table-cell {
    display: table-cell;
  }
}


  
    
      Heading 1
      Text 1
      Heading 2
      Text 2
    
    
      Heading 1
      Text 1
      Heading 2
      Text 2
    
    
      Heading 1
      Text 1
      Heading 2
      Text 2
    
    
      Heading 1
      Text 1
      Heading 2
      Text 2

Collapse a responsive table layout using divs to 2 columns on small screens

Answers (1)

Related Questions