1826
Question:
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:
<pre class="snippet-code-css lang-css prettyprint-override">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;
}
<pre class="snippet-code-html lang-html prettyprint-override"> <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-* ?
With border-collapse HTML tables "automatically" handle the repeating borders around adjacent rows & cells as <a href="https://stackoverflow.com/a/35678354/171456" rel="nofollow">explained here</a>.
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;
}
<a href="https://www.codeply.com/go/JAst9a3XHr" rel="nofollow">https://www.codeply.com/go/JAst9a3XHr</a>
Answer2:Use borders for only td with negative margin and remove borders for table and th
<pre class="snippet-code-css lang-css prettyprint-override">table.table-bordered > tbody > tr > td {
border: 1px solid black;
margin:-0.5px;
}
div{
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
<pre class="snippet-code-html lang-html prettyprint-override"><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>
