Bootstrap 4 Table With D-flex And Another Border Color

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 dou

Solution 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

Solution 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>