我正在使用 bootstrap 4.0,我正在尝试使用 table-bordered
(更改颜色)和 d-flex
和 col-*
来调整列的大小。
问题是,由于某种原因,如果我尝试更改颜色,所有边框都是双倍的。
例如,这就是我正在做的事情:
table.table-bordered {
border: 1px solid black;
}
table.table-bordered > thead > tr > th {
border: 1px solid black;
}
table.table-bordered > tbody > tr > td {
border: 1px solid black;
}
div{
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
<table class="table table-bordered">
<tbody>
<tr class="table-danger d-flex">
<td class="col-6">Cell 1</td>
<td class="col-6">Cell 2</td>
</tr>
<tr class="d-flex">
<td class="col-6">Cell 3</td>
<td class="col-6">Cell 5</td>
</tr>
</tbody>
</table>
</div>
正如您在示例中看到的那样,边框是双倍的。
使用
w-*
类它可以正常工作,但它们的通用性较差如何使用
d-flex
和 col-*
解决此问题? 最佳答案
使用 border-collapse
HTML 表“自动”将相邻行和单元格周围的重复边框处理为 explained here 。
Flexbox 不会有条件地在每个单元格上渲染特定的左/右/上/下边距,因此它会渲染在每行底部和表格周围加倍的完整边框。
要解决此问题,您只需要渲染 tbody
的左边框和上边框,然后仅渲染 td
单元格的右边框和下边框。
table.table-bordered {
border-width: 0;
}
table.table-bordered tbody {
border-style: solid;
border-color: black;
border-width: 1px 0 0 1px;
}
table.table-bordered td {
border-color: black;
border-width: 0 1px 1px 0;
}
https://www.codeply.com/go/JAst9a3XHr
关于html - 带有 d-flex 和另一种边框颜色的 Bootstrap 4 表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51840249/