unable to reduce space between table rows - html

Question

I'm working on an app where I have a table with rows and columns and a container of checkboxes in the format of the image below :
The problem is that I want the letters A , B , C , D which represent each row to align on the same height with my checkboxes and by reducing margin or padding between the letters I see no difference so I need your help
My code :
.checkboxes-container{
position: absolute;
width:620px;
height:240px;
left:25%;
top:42%;
display:flex;
justify-content: flex-start;
}
.checkbox-container{
background-color:teal;
width:230px;
height:100%;
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
}
.checkbox-container div{
flex-basis:100%;
}
.business-bx{
margin-top:17px;
transform:scale(1.5);
}
.business-bx:not(:first-child){
margin-left:38px;
}
.business-bx:first-child{
margin-left:10px;
}
.table tbody tr td:first-child {
font-weight:bold;
}
.table {
border-spacing: 3em;
}
.letter{
font-size:20px;
padding:0;
}
<div class="table-container">
<table class="table">
<thead>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr class="letter">
<td>A</td>
</tr>
<tr class="letter">
<td>B</td>
</tr>
<tr class="letter">
<td>C</td>
</tr>
<tr class="letter">
<td>D</td>
</tr>
</tbody>
</table>
</div>
<div class="checkboxes-container">
<div class="checkbox-container business-boxes">
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
</div>
</div>

Answer 1

This can be achieved by merging you checkbox code with the table. Here, I have updated the code.
tbody>tr>td:not(:first-child) {
background-color: teal;
padding:20px;
}
tbody>tr>td{
padding-right:5px;
}
thead>tr>td{
text-align: center;
}
table{border-collapse: collapse;}
<div class="table-container">
<table class="table">
<thead>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr class="letter">
<td>A</td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
</tr>
<tr class="letter">
<td>B</td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
</tr>
<tr class="letter">
<td>C</td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
</tr>
<tr class="letter">
<td>D</td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
<td><input type="checkbox" class="business-bx"></td>
</tr>
</tbody>
</table>
</div>