Bootstrap 4 table with d-flex and another border c

问题:

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.

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

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

回答1:

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

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.

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

回答2:

Use borders for only td with negative margin and remove borders for table and 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>