title: How to semantically code an HTML nested table that aligns (and associates) with its parent table's headers
body: <p>Edit: The selected answer contains a link to the working fiddle I was able to compose without the use of a nested table. </p>
  
  <p>I want to semantically code a table in HTML with a layout like the picture below. Unfortunately I haven't been able to find anything quite like it here on the network.</p>
  
  <p><img src="https://i.stack.imgur.com/j6pJ3.png" alt="enter image description here"></p>
  
  <p>I have been able to force the look by manually setting cell widths, but I want to make sure the code I'm producing makes sense, and I don't think that's the case, because without manually setting the widths, standard rendering looks more like the following picture.</p>
  
  <p><img src="https://i.stack.imgur.com/M9wTc.png" alt="enter image description here"></p>
  
  <p>So far, the problematic code I have come up with looks like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;Type of Loss Dollar&lt;/th&gt;
        &lt;th scope="col"&gt;Reserve Amount&lt;/th&gt;
        &lt;th scope="col"&gt;Paid Amount&lt;/th&gt;
        &lt;th scope="col"&gt;Total This Loss&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td colspan="3"&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th scope="row"&gt;Medical&lt;/th&gt;
                &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                &lt;th scope="row"&gt;Indemnity&lt;/th&gt;
                &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                &lt;th scope="row"&gt;Expense&lt;/th&gt;
                &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;&lt;td&gt;
          TOTAL
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>