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

【问题标题】：Bootstrap 4 table with d-flex and another border color具有 d-flex 和另一种边框颜色的 Bootstrap 4 表
【发布时间】：2019-01-21 05:47:58
【问题描述】：

我正在使用 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-* 的这个问题？

【问题讨论】：

标签： html css twitter-bootstrap html-table bootstrap-4

【解决方案1】：

使用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

【讨论】：

非常感谢，如果可以，请将border: none; 添加到table.table-bordered，这样解决方案就完美了！
谢谢，是的，这也是需要的。

【解决方案2】：

仅对具有负边距的 td 使用边框，并为 table 和 th 删除边框

table.table-bordered > tbody > tr > td {
  border: 1px solid black;
  margin:-0.5px;
}        
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>

【讨论】：