Question

我目前正在尝试使用表格模型模拟flexbox space-between布局。基本上，我有一个表格设置为100%容器的宽度，单元格具有固定的像素宽度，我希望border-spacing到＆＃34;填充＆＃34 ;剩下的空间。到目前为止，将表格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>

使用表模型的Flexbox空间行为

1 个答案: