.outer-table {
border: 2px solid orange;
}
.outer-table th {
border: 2px solid red;
}
.inner-table tr {
border: 2px solid blue;
}
.inner-table td {
border: 2px solid green;
}
table {
width: 100%;
}
tr {
width: 100%;
}
th,
td {
width: 33.33333%;
}
tfoot td {
width: 100%;
}
th {
padding: 20px;
}
td {}
<table class="outer-table">
<thead class="outer-table-head">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="outer-table-body">
<tr>
<table class="inner-table">
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remove-button">Reset</button>
<button class="add-button">Save</button>
</td>
</tr>
</tfoot>
</table>
</tr>
</tbody>
</table>
