html - 有没有办法让行内 block 元素表现得像表格单元格？

Question

我试图用 css 类模拟 HTML 表格，但最后一个“单元格”元素总是被推到下一行。

我目前解决这个问题的方法是将最后一个元素的宽度减少几个百分点，以便元素的总宽度加起来达到 ~ 97%。这可以防止最后一个元素被推到下一行，但它看起来不太好，因为末尾有未使用的空间。

有没有办法让表格单元格很好地排列并使用 100% 的包含宽度？

.cell {
  display: inline-block;
}

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div>
    <div class="cell" style="width:40%">First Name</div>
    <div class="cell" style="width:20%">Age</div>
  </div>
</div>

Answer 1

这是 display:inline-block; 的一个众所周知的“问题”

一种解决方案是注释 div 之间的“空格”。 存在其他解决方案，您应该看看这个问题:How to remove the space between inline-block elements?

.cell {
  display: inline-block;
}

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div><!--
    --><div class="cell" style="width:40%">First Name</div><!--
    --><div class="cell" style="width:20%">Age</div>
  </div>
</div>