"Flexible" 响应式 table 使用 div。如果可以的话，整列延伸的地方

Question

考虑一下我有一个包含 3 列的 table。 "Normally" 每列应占页面的 1/3。但是，如果其中一列的数据变得太大，而其他列有额外的 space 它应该 "flex"，并且该列应该占据剩余的 space.

但是它仍然应该是 "table"：因为列和行的边框需要对齐。

在使用原始弹性框时，我尝试了行优先和列优先两种方法。然而，两者都有 "inner" flexbox 可能会拉伸的问题，但该信息会在其他 flex boxes 上丢失。

我尝试使用以下两种方法解决它：但如您所见，它不起作用：

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

这能做到吗？还是我应该放弃这个？

Answer 1

Flexbox 可能不是 best-suited 解决方案。我建议寻找使用 CSS Grid Layout。有很多方法可以实现这一点，但这里是一个开始。

使用 3 列 3 行网格，单元格自动宽度（使用可选的 min-width 来保留一些 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>

"Flexible" 响应式 table 使用 div。如果可以的话，整列延伸的地方

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

html

css

tabular

flexbox

responsive-design