Html 使表格单元格的边框为表格宽度的100%

我有以下标记：

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
  </div>
  <div class="row">
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="row">
    <div class="cell">5</div>
  </div>
</div>

问题是表格行的边框仅覆盖其包含表格单元格的宽度。我希望最后一个表格行与所有其他表格行具有相同的边框宽度（当然是水平的；），而无需更改其表格单元格宽度或添加其他表格单元格

这是小提琴：

有没有关于如何实现这一点的想法？

将此添加到您的CSS中：

.row:last-child::after {
  content:' ';
}

这样，它将渲染另一个单元格及其底部边框，而不实际创建一个

---

我假设您将单元格宽度设置为50%，因为除最后一行外，每行有两个单元格，因此处理此问题的一种方法是使用内联样式覆盖该宽度：

<div class="cell" style="width:100%">
    5
</div>

5.
因为CSS中没有
行span
/
列span
。您可以使用flexbox来实现您想要的结果。它还可以像colspan一样，使唯一一个可以获取整个宽度的单元格可用


.row{
显示器：flex；
边框底部：1px实心；
}
.细胞{
弹性：1；
}

1.
2.
3.
4.
5.
如果您不愿意更改最后一个单元格的宽度或添加另一个单元格，则无法获得所需的结果。为什么不在这里使用
表格
？您似乎正在尝试呈现表格数据。Firefox会按照您的意愿进行操作。谢谢！这实际上是可行的，但在我的例子中，我更喜欢Pangloss答案，因为如果不需要，它不会添加：after（如果最后一行中有两个单元格）。但是谢谢你的支持！空间不是必需的。添加
display:table cell
可能有助于设置生成的表格单元格的样式，否则它将是一个匿名父元素。谢谢，但正如我提到的，我不想更改单元格的样式。
<div class="cell" style="width:100%">
    5
</div>