CODEWITHSUNDEEP
htmlcssresponsive-designflexboxtabular
paul23
paul23

Reputation: 9445

"Flexible" Responsive table using divs. Where a full column stretches if able

Well Consider I have a table with 3 columns. "Normally" each column should take 1/3rd of the page. However if one of the column's data gets too large, and the other columns have extra space it should "flex", and the column should occupy the remaining space.

However it should still be a "table": as in column & row borders need to align.

When using naive flex boxes I tried both a row and column first approach. However both have the problem that the "inner" flexbox might stretch, but that information is lost on the other flex boxes.

I've tried to solve it below using both methods: but as you can see it's not working:

 .bordered{
      border-width: 1px;
      border-color: black;
      border-style: solid;
    }
    
    .main {
      display: block;
      position: relative;
    }
    
    .row {
      display: flex;
      position: relative;
      width: 100%;
    }
    
    .cell {
      flex: 1 1 auto;
      max-width: 75%;
    }
 <div class="main bordered">
       <div class="row">
           <div class="cell bordered">
               first
           </div>
           <div class="cell bordered">
               second
           </div>
           <div class="cell bordered">
               third
           </div>
       </div>
       <div class="row">
           <div class="cell bordered">
               first
           </div>
           <div class="cell bordered">
               This is text that will increase the width of the cell.
           </div>
           <div class="cell bordered">
               third
           </div>
       </div>
       <div class="row">
           <div class="cell bordered">
               first
           </div>
           <div class="cell bordered">
               This is text that will increase the width of the cell. Not only that, but due to the amount of text it also increases the height of a row. This isn't a problem with this setup. But had we chosen to use a column-first approach this cell would destroy any "row" layout.
           </div>
           <div class="cell bordered">
               third
           </div>
       </div>
    </div>

Can this be done? Or should I give up on this?

Upvotes: 0

Views: 52

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62841

Flexbox is probably not the best-suited solution for this. I would recommend looking to use CSS Grid Layout. There are many ways to accomplish this, but here's a start.

Use a 3 column, 3 row grid, with auto width cells (using an optional min-width to preserve some space).

.main {
  display: grid;
  position: relative;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

.bordered {
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

.cell {
  grid-column-end: span 1;
}

.cell:nth-child(3n+1) {
  grid-column-start: 1;
  min-width: 50px;
}

.cell:nth-child(3n+2) {
  grid-column-start: 2;
}

.cell:nth-child(3n+3) {
  grid-column-start: 3;
  min-width: 100px;
}
<div class="main bordered">
  <div class="cell bordered">
    first
  </div>
  <div class="cell bordered">
    second
  </div>
  <div class="cell bordered">
    third
  </div>
  <div class="cell bordered">
    first
  </div>
  <div class="cell bordered">
    This is text that will increase the width of the cell.
  </div>
  <div class="cell bordered">
    third
  </div>
  <div class="cell bordered">
    first
  </div>
  <div class="cell bordered">
    This is text that will increase the width of the cell. Not only that, but due to the amount of text it also increases the height of a row. This isn't a problem with this setup. But had we chosen to use a column-first approach this cell would destroy any
    "row" layout.
  </div>
  <div class="cell bordered">
    third
  </div>
</div>
</div>

Upvotes: 1

Related Questions