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

Question

我有以下标记:

<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:

.table {
  display: table;
  border-collapse: collapse;
  width: 100%
}

.row {
  display: table-row;
  border-bottom: 1px solid black;
}

.cell {
  display: table-cell;
  width: 50%;
}

问题是表格行的边框只覆盖了它包含的表格单元格的宽度。我希望最后一个表格行与所有其他表格行具有相同的边框宽度(当然是水平的;))，而不更改其表格单元格宽度或不必添加另一个表格单元格。

这是 fiddle :https://jsfiddle.net/tgry53ss/

关于如何实现这一点有什么想法吗？

Answer 1

将此添加到您的 CSS:

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

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

fiddle