Currently utilizing bootstrap 4.0, I am attempting to customize the table-bordered by changing the color and incorporating d-flex with col-* for column sizing.
An issue arises where all borders become duplicated when attempting to modify the color scheme.
For instance, here is my current approach:
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>In the provided example, it can be observed that borders are appearing doubled.
The issue does not occur when using w-* classes, but they offer less flexibility.
Looking for a solution on how to resolve this problem while using d-flex and col-*.