I am experiencing an issue with my bordered table that is using the Bootstrap classes table table-bordered. When I add border-collapse: separate, the borders are correctly separated, but the top and bottom borders seem to disappear due to zero width.
I am unsure if this is a Bootstrap quirk or if I am implementing something incorrectly. Can someone guide me on the correct approach to resolve this issue?
.table-bordered {
border-collapse: separate;
}<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Bootstrap test</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f6c7d6c30073d0b3e20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous>
<link rel="stylesheet" href="/test.css>
</head>
<body>
<container>
<div class="row>
<div class="col-6>
<table class="table table-bordered m-5>
<tbody>
<tr>
<td>Box</td>
<td rowspan=2>Big box</td>
<td>Box</td>
</tr>
<tr>
<td>Box</td>
<td>Box</td>
</tr>
</tbody>
</table>
</div>
</div>
</container>
</body>
</html>