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%;
}

问题是表行的边框仅覆盖其包含的表格单元格的宽度。我希望最后一个表格行具有相同的边框宽度（当然是水平;）），就像所有其他表格行一样，不需要更改其表格单元格宽度或者必须添加另一个表格单元格。

这是小提琴：https://jsfiddle.net/tgry53ss/

关于如何实现这一目标的任何想法？

Answer 1

将此添加到您的CSS：

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

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

fiddle

Answer 2

由于CSS中没有rowspan / colspan。您可以使用flexbox来获得所需的结果。它也可以使唯一的单元格像colspan一样可以获得整个宽度。

＆＃13;

.row {
  display: flex;
  border-bottom: 1px solid;
}
.cell {
  flex: 1;
}

＆＃13;

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

＆＃13;

修改：如果您不希望唯一的单元格占据整个宽度，请执行以下操作：

.row {
  display: flex;
  border-bottom: 1px solid;
}
.cell {
  flex: 0 0 50%;
}

Answer 3

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

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

将表格单元格的边框设为表格宽度

3 个答案: