Flexbox space-使用 table 模型的行为之间

Question

我目前正在尝试使用 table 模型模拟 flexbox space-between 布局。基本上，我有一个 table 设置为 100% 其容器的宽度，具有固定像素宽度的单元格，我希望 border-spacing 到 "fill" space 剩余。到目前为止，将 table 的 width 设置为 100% 会覆盖单元格的固定宽度，这不是我想要的。这可能吗？

我显然更喜欢使用真正的 flexbox 来执行此操作，但我正在处理的项目必须在旧版本的 IE 上运行，所以这不是一个选项。

感谢您的宝贵时间。

Answer 1

您可以在实际单元格之间添加空的 table-单元格元素。这些空单元格将增长以填充可用的 space.

/* Tabular displays */
.table        { display: table;      }
.row          { display: table-row;  }
.cell, .space { display: table-cell; }
/* Widths */
.table                { width: 100%;  }
.cell                 { width: 100px; }
.cell ~ .cell         { width: 150px; }
.cell ~ .cell ~ .cell { width: 200px; }
/* Borders */
.table { border-collapse: collapse; }
.cell  { border: 1px solid;         }

<div class="table">
  <div class="row">
    <div class="cell">100px</div>
    <span class="space"></span>
    <div class="cell">150px</div>
    <span class="space"></span>
    <div class="cell">200px</div>
  </div>
  <div class="row">
    <div class="cell">100px</div>
    <span class="space"></span>
    <div class="cell">150px</div>
    <span class="space"></span>
    <div class="cell">200px</div>
  </div>
</div>

Flexbox space-使用 table 模型的行为之间

Flexbox space-between behavior using table model

html

css

css-tables