Making non identical table rows (table within table within table)

Question

I am having a problem creating a non-identical row to the one above it. I want one row with 3 cells, and below that one row that spreads to the end of the row, and so on so on. First row - 3 cells, second row - 1 long cell (equals to the three above in length) and repeat.

Here is the HTML & CSS template I used

#table {
  margin: 0px;
  margin-left: 585px;
  margin-top: 50px;
  z-index: 2;
  width: 385;
  border-collapse: collapse;
}

.divStyle {
  /* in charge of the scroller*/
  width: 385px;
  height: 428px;
  overflow: auto;
}

.innerTables {
  width: 360;
  border-collapse: collapse;
  vertical-align: middle;
}

.productionTable tr td {
  width: 360px;
  border: 2px solid black;
}

.innerTables tr td,
th {
  margin: 0px;
  padding: 0px;
  width: 120px;
}

.innerTables tr td {
  border: 1px solid black;
}

<table id='table'>
  <tr>
    <td>
      <table class='innerTables'>
        <tr>
          <th>Building</th>
          <th>Amount</th>
          <th>1 Per</th>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <div class='divStyle'>
        <table class='innerTables'>
          <tr>
            <td>Fishery</td>
            <td class='inputText' id="fishery"></td>
            <td>800 Farmers</td>
          </tr>
          <tr>
            <td colspan="0">
              <table class='productionTable'>
                <tr>
                  test
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

I tried using the border to indicate whether its working or not.

This is what I try to achieve

This is what I achieve

Answer 1

Use colspan to expand the width of the columns

I made a fiddle for you https://jsfiddle.net/vzy97s2a/

                    <tr>
                      <td colspan="3">
                        wider
                      </td>
                    </tr>