具有d-flex和另一种边框颜色的Bootstrap 4桌子 [英] Bootstrap 4 table with d-flex and another border color

问题描述

我正在使用bootstrap 4.0，并且尝试使用table-bordered(更改颜色)和d-flex和col-*来调整列大小.

I'm working with bootstrap 4.0 and i'm trying to use table-bordered (changing the color) and d-flex with col-* to sizing columns.

由于某种原因，如果我尝试更改颜色，则所有边框都是双边框.

The thing is, for some reason, all borders are double if I try to change the color.

例如，这就是我在做什么:

For example, this is what I'm doing:

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>

在示例中您可以看到边框是双重的.

As you can see in the example the borders are double.

使用w-* clase可以正常工作，但是通用性较差

With w-* clases it works ok, but they are less versatile

如何使用d-flex和col-*解决此问题?

How can I fix this problem with d-flex and col-* ?

推荐答案

使用border-collapse HTML表可以自动"处理相邻行周围的重复边框&单元格为在此处解释.

With border-collapse HTML tables "automatically" handle the repeating borders around adjacent rows & cells as explained here.

Flexbox不会有条件地在每个单元格上渲染特定的左/右/上/下页边距，因此会渲染整个边框，该边框在每行的底部和表格周围加倍.

Flexbox doesn't conditionally render specific left/right/top/bottom margins on each cell so it's rendering the full border which doubles-up on the bottom of each row, and around the table.

要解决此问题，您只需要在tbody上渲染左侧和顶部边框，然后在td单元格上仅渲染右侧和底部边框.

To fix this you'd need to render only the left and top borders on the tbody, then only the right and bottom borders on the td cells.

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

这篇关于具有d-flex和另一种边框颜色的Bootstrap 4桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！