显示不遵守的表格单元格宽度百分比答案

【问题标题】：Display table-cell width percentages not obeyed显示不遵守的表格单元格宽度百分比
【发布时间】：2017-03-31 12:01:18
【问题描述】：

为什么下面示例中的单元格应该只覆盖表格宽度的一半，但它却完全一起拉伸？

我查看了许多有类似问题的 stackoverflow 帖子，但没有一个对我有用。这反映在下面的 codepen 示例中。

我尝试使用表格/表格单元格的原因是，我将拥有高度可变的元素。我不能使用浮点数让它上下曲折，我不想为元素设置最小/最大高度。

ul {
  border: 1px solid black;
  display: table;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

ul li {
  border: 1px solid black;
  display: table-cell;
  width: 25%;
}

<ul>
  <li>This is a cell</li>
  <li>This is a cell</li>
</ul>

【问题讨论】：

将display: table; 更改为display: table-row;
这是 display:table-cell 的默认实现。我会选择我 display:inline-block;在所有 li 标签上
@j08691 我在发布这个问题之前已经尝试过了，但它忽略了表格元素上的width: 100%。
@repzero 模仿 tr/td，我希望它们的高度取决于每行的最高单元格。从外观上看，我不认为纯 CSS 可以实现这一点，我可能需要投入一些 JS 才能完成。

标签： html css

【解决方案1】：

如果您想模仿 tr/td，我相信将 ul 标签显示为 flex 可以完成这项工作。也可以使用 css flex 属性设置 li 标签的宽度

ul {
  border: 1px solid black;
  display: table;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

ul li {
  border: 1px solid black;
  flex:0 0 25%;
  margin:0;
  border:solid red;
}
ul{
  position:relative;
  display:flex;
  list-style-type:none;
}
li{
  
}

<ul>
  <li>This is a cell</li>
  <li>This is a cell<br><br>addsd</li>
</ul>

【讨论】：

完全忘记了 flex！非常感谢 repzero。