I was trying to make a table with borders but suddenly they disappeared. I tried border-collapse: separate; but it didn't work. I am using bootstrap too. Is it from bootstrap? What should I do?
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table style="border: 2px solid #232323; width: 50%; height: 50%; border-collapse: separate;">
<thead>
<th>Name</th>
<th>Link to channel</th>
</thead>
<tbody>
<tr>
<td>berriz44 (me!)</td>
<td><a href="https://www.youtube.com/channel/UCxGHpsV2VBI4fNgM7VMnflg">Link</a></td>
</tr>
<tr>
<td>linus tech tips</td>
<td><a href="https://www.youtube.com/c/LinusTechTips">Link</a></td>
</tr>
</tbody>
</table>I was using bootstrap, so all I had to do is add class="table table-bordered".
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table style="border: 2px solid #232323; width: 50%; height: 50%;" class="table table-bordered">
<thead>
<th>Name</th>
<th>Link to channel</th>
</thead>
<tbody>
<tr>
<td>berriz44 (me!)</td>
<td><a href="https://www.youtube.com/channel/UCxGHpsV2VBI4fNgM7VMnflg">Link</a></td>
</tr>
<tr>
<td>linus tech tips</td>
<td><a href="https://www.youtube.com/c/LinusTechTips">Link</a></td>
</tr>
</tbody>
</table>I also had to remove border-collapse: separate; because else it would look ugly.