CSS table-cell 忽略宽度，即使使用 table-fixed

Question

我想要一个设置了百分比宽度的divwith 。是我最好的选择，我需要几个并排的高度相等。display: table-celldisplay: table-celldiv

经过研究，我正确地将父级设置为display: table; table-layout: fixed; width: 100%在许多其他线程中找到的那样，但table-cell仍然填充了父级。

.table-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-cell {
  display: table-cell;
  width: 25%;
  overflow: hidden !important;
  border: 1px solid black;
}

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
</div>

这不可能吗？

Answer 1

您可以使用单个块元素来解决此问题。

.table-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 1px solid green;
}

.table-cell {
  display: table-cell;
  width: 25%;
  overflow: hidden !important;
  border: 1px solid black;
}

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
  <div><div/>
</div>