Table borders html css

I have a frame around and inside this frame is a table.
This is CSS-code:

<style>
table { 
    width: 50%; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
}
th { 
    background: #ccc; /* Цвет фона ячеек */
    padding: 3px; /* Поля вокруг содержимого ячеек */
        
    border-collapse: collapse;
}
td { 
    font-family: Verdana;
    font-size:16pt;
    border: 1px solid black; /* Граница вокруг ячеек */
    text-align: center;
    border-collapse: collapse;
    }
.brd {
    border: 5px black; /* Параметры границы */
    padding: 10px; /* Поля вокруг текста */
    border-style: inset; /*solid;*/
    border-collapse: collapse;
}
</style>

This is HTML-code:

<div class="brd" align="center">
<table>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>
</div>

Why are some field borders merging and getting bolder in a table and how to fix it?

It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.

>Solution :

This is due to border-collapse and the fact you are adding border on all cells.

To avoid the problem you should adapt your cell border to get only 1 border:

/*ADDED*/
table{
  border:0px;
  border-collapse: initial;
  border-spacing: 0px;
}
td{
  border-bottom:0px;
  border-right:0px;
  border-collapse: initial;
}
tr > td:last-child {
  border-right:1px solid black;
}
tr:last-child > td {
  border-bottom:1px solid black;
}

DEMO

table { 
    width: 50%; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
}
th { 
    background: #ccc; /* Цвет фона ячеек */
    padding: 3px; /* Поля вокруг содержимого ячеек */
        
    border-collapse: collapse;
}
td { 
    font-family: Verdana;
    font-size:16pt;
    border: 1px solid black; /* Граница вокруг ячеек */
    text-align: center;
    border-collapse: collapse;
    }
.brd {
    border: 5px black; /* Параметры границы */
    padding: 10px; /* Поля вокруг текста */
    border-style: inset; /*solid;*/
    border-collapse: collapse;
}

/*ADDED*/
table{
  border:0px;
  border-collapse: initial;
  border-spacing: 0px;
}
td{
  border-bottom:0px;
  border-right:0px;
  border-collapse: initial;
}
tr > td:last-child {
  border-right:1px solid black;
}
tr:last-child > td {
  border-bottom:1px solid black;
}

<div class="brd" align="center">
<table>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>
</div>