我有以下标记：
<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/
关于如何实现这一点的任何想法？
由于CSS中没有rowspan/ colspan。您可以改用flexbox获得所需的结果。像colspan一样，它也可以使唯一的单元占据整个可用宽度。
.row {
display: flex;
border-bottom: 1px solid;
}
.cell {
flex: 1;
}<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>编辑：如果您不希望唯一的单元格采用整个宽度，请执行以下操作：
.row {
display: flex;
border-bottom: 1px solid;
}
.cell {
flex: 0 0 50%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句