Table tr border width 100% - html

Question

I want to make my border-top full table width but it's only taking my table data (td) size...
The last tr have my border-top but it's not taking the full size of the table.
th {
border: 0 solid #581D74;
border-bottom-width: 1px;
padding: 15px;
}
tr, td, th {
text-align: left;
padding: 15px;
}
.add-btn {
min-width: 0;
color: white;
}
.add-icon {
color: #581d74;
}
.total-row {
border: 0 solid #581d74;
border-top-width: 1px;
padding: 15px;
border-collapse: collapse;
}
<table class="disinves-table">
<tr class="table-header">
<th></th>
<th>head 1</th>
<th>head 2</th>
<th>head3</th>
</tr>
<tr>
<td><button mat-button class="add-btn"><mat-icon class="add-icon">add_circle</mat-icon></button></td>
<td>first data</td>
<td>19%</td>
</tr>
<tr class="total-row">
<td>Total</td>
<td></td>
<td>8654</td>
</tr>
</table>

Answer 1

If you are complaining about the gaps you see in the border, that is because the default style of a table is to have a few pixels of space between the cells.
Solution: set the table's border-spacing to 0.
.disinves-table {
border-spacing: 0;
}
th {
border: 0 solid #581D74;
border-bottom-width: 1px;
padding: 15px;
}
tr, td, th {
text-align: left;
padding: 15px;
}
.add-btn {
min-width: 0;
color: white;
}
.add-icon {
color: #581d74;
}
.total-row {
border: 0 solid #581d74;
border-top-width: 1px;
padding: 15px;
border-collapse: collapse;
}
<table class="disinves-table">
<tr class="table-header">
<th></th>
<th>head 1</th>
<th>head 2</th>
<th>head3</th>
</tr>
<tr>
<td><button mat-button class="add-btn"><mat-icon class="add-icon">add_circle</mat-icon></button></td>
<td>first data</td>
<td>19%</td>
</tr>
<tr class="total-row">
<td>Total</td>
<td></td>
<td>8654</td>
</tr>
</table>