How to create summary sheet like html tables - html

Question

I am working with HTML tables and need to achieve like attached image.
When I try to achieve this,I caught problem like this
① I couldn't figure out how not to display border line.
② Each cell size is not aligned compared to desired result.
I would like to achieve in a certain way. If you have any opinion, please let me know.
Thanks
table {
border-collapse:collapse;
table-layout: fixed;
text-align: center;
width: 10rem;
height: 10rem;}
td {
border:solid black 1px;
}
.noborder {
}
.noborder2{
}
<table>
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>

Answer 1

You can do something like this using empty-cells: hide;.
Note: but the border is bit off since it removes the td border where the content doesn't exists. If that's ok.
.tbl {
empty-cells: hide;
border: 1px solid #999;
}
td {
background: #fff;
border: 1px solid #999;
padding: 10px 15px;
cursor: pointer;
}
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
Here is the another version:
.MainDiv {
border: 1px solid #999;
display: inline-block;
}
table.tbl {
empty-cells: hide;
}
td.noborder {
background: #fff;
border: 1px solid #999;
width: 50px;
height: 50px;
text-align: center;
}
td.removeBorder {
width: 100px;
height: 50px;
}
td:empty {
visibility: hidden;
}
<div class="MainDiv">
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" class="removeBorder">Total (summary)</td>
</tr>
<tr>
<td class="noborder">A</td>
<td class="noborder">B</td>
<td class="noborder">C</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder">1</td>
<td class="noborder">2</td>
<td class="noborder">3</td>
<td class="noborder">6</td>
</tr>
</tbody>
</table>
</div>