我正在使用 bootstrap 4.0,我正在尝试使用 table-bordered(更改颜色)和 d-flexcol-* 来调整列的大小。

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

例如,这就是我正在做的事情:

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-flexcol-* 解决此问题?

最佳答案

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

10-12 07:29
查看更多