Table Row is not filling the full width of the table - html

Question

I'm creating a HTML form and having an issue with getting the 2 column rows to fill the full width of the table. I have tried using colspace and setting a width to it but it's not working. I have also tried setting the width to 100% but it's also not working. CSS also doesn't seem to be making any changes to the
body {
width: 60%;
margin-left: auto;
margin-right: auto;
}
table {
width: 100%;
table-layout: fixed;
}
.heading {
text-align: center;
font-weight: bold;
padding: 5px;
text-decoration: underline;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 25px;
}
.table-heading {
text-align: center;
padding: 20px;
font-weight: bold;
font-size: 14px;
background-color: #8080802e;
}
.demographics {
text-align: left;
}
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding: 6px;
}
<img src="https://via.placeholder.com/150" />
<table>
<tbody>
<tr>
<td class="table-heading" colspan="3">APPLICANT'S INFORMATION</td>
</tr>
<tr>
<td>Last Name:</td>
<td>First Name:</td>
<td>Middle Intial:</td>
</tr>
<tr>
<td colspan="2">Current Address:</td>
<td>City:</td>
</tr>
<tr>
<td>State:</td>
<td>Zip Code:</td>
<td>Phone #:</td>
</tr>
<tr>
<td colspan="2">Spouse's Name:</td>
<td>Phone #:</td>
</tr>
<tr>
<td class="table-heading" colspan="3">CHILDREN'S INFORMATION (NO STEP CHILDREN)</td>
</tr>
<tr>
<td>1)</td>
<td>5)</td>
</tr>
<tr>
<td>2)</td>
<td>6)</td>
</tr>
<tr>
<td>3)</td>
<td>7)</td>
</tr>
<tr>
<td>4)</td>
<td>8)</td>
</tr>
</tbody>
</table>

Answer 1

Because you have rows with 1, 2, and 3 columns, you need to use colspan with a number that is divisible by all three numbers, in this case, 6.
For one column per row, you would use colspan="6" because 6/6 = 1
For two columns per row, colspan="3" because 6/3 = 2
For three columns per row, colspan="2" because 6/2=2
Here is the HTML for a table with 1, 2, and 3 columns:
<table>
<tr>
<td colspan="6">One Column</td>
</tr>
<tr>
<td colspan="3">Two Column</td>
<td colspan="3">Two Column</td>
</tr>
<tr>
<td colspan="2">Three Column</td>
<td colspan="2">Three Column</td>
<td colspan="2">Three Column</td>
</tr>
</table>

Answer 2

Use Two Separate Table.
body {
width: 60%;
margin-left: auto;
margin-right: auto;
}
table {
width: 100%;
table-layout: fixed;
}
.heading {
text-align: center;
font-weight: bold;
padding: 5px;
text-decoration: underline;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 25px;
}
.table-heading {
text-align: center;
padding: 20px;
font-weight: bold;
font-size: 14px;
background-color: #8080802e;
}
.demographics {
text-align: left;
}
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding: 6px;
}
.no-border-top{
border-top : 0
}
<img src="https://via.placeholder.com/150" />
<table>
<tbody>
<tr>
<td class="table-heading" colspan="3">APPLICANT'S INFORMATION</td>
</tr>
<tr>
<td>Last Name:</td>
<td>First Name:</td>
<td>Middle Intial:</td>
</tr>
<tr>
<td colspan="2">Current Address:</td>
<td>City:</td>
</tr>
<tr>
<td>State:</td>
<td>Zip Code:</td>
<td>Phone #:</td>
</tr>
<tr>
<td colspan="2">Spouse's Name:</td>
<td>Phone #:</td>
</tr>
</tbody>
</table>
<table class="no-border-top">
<tbody>
<tr>
<td class="table-heading no-border-top" colspan="2">CHILDREN'S INFORMATION (NO STEP CHILDREN)</td>
</tr>
<tr>
<td>1)</td>
<td>5)</td>
</tr>
<tr>
<td>2)</td>
<td>6)</td>
</tr>
<tr>
<td>3)</td>
<td>7)</td>
</tr>
<tr>
<td>4)</td>
<td>8)</td>
</tr>
</tbody>
</table>