Bootstrap 4 表格，带有 d-flex 和另一种边框颜色

Question

我正在使用 Bootstrap 4.0，我正在尝试使用table-bordered（更改颜色）和d-flexwithcol-*来调整列的大小。

问题是，出于某种原因，如果我尝试更改颜色，所有边框都是双的。

例如，这就是我正在做的事情：

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

Answer 1

使用border-collapseHTML 表格“自动”处理相邻行和单元格周围的重复边框，如此处所述。

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