html - 使用表模型的 Flexbox 间隔行为

Question

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

我显然更喜欢使用真正的 flexbox 来做到这一点，但我正在从事的元素必须在旧版本的 IE 上工作，所以这不是一个选项。

感谢您的宝贵时间。

Answer 1

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

/* 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>