'My table border doesn't want itself not to be collapsed

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>
htmlcsshtml-tableborder


Solution 1:[1]

You only set the border on the table itself. If you want border around each cell you need to set the border style on each th and td (preferably in a style tag or css file).

<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="width: 50%; height: 50%">
    <thead>
        <th style="border: 2px solid #232323;">Name</th>
        <th style="border: 2px solid #232323;">Link to channel</th>
    </thead>
    <tbody>
        <tr style="border: 2px solid #232323;">
            <td style="border: 2px solid #232323;">berriz44 (me!)</td>
            <td style="border: 2px solid #232323;"><a href="https://www.youtube.com/channel/UCxGHpsV2VBI4fNgM7VMnflg">Link</a></td>
        </tr>
        <tr>
            <td style="border: 2px solid #232323;">linus tech tips</td>
            <td style="border: 2px solid #232323;"><a href="https://www.youtube.com/c/LinusTechTips">Link</a></td>
        </tr>
    </tbody>
</table>

If you only want a border around the whole table, your snippet works for me.

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sett
Solution 2 berriz

Related Questions