html - 具有 d-flex 和另一种边框颜色的 Bootstrap 4 表

Question

我正在使用 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-*clases 可以正常工作，但它们的通用性较差

如何使用d-flexand解决此问题col-*？

标签： htmlcsstwitter-bootstraphtml-tablebootstrap-4

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