我有以下标记:
<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] 删除。
我来说两句