HTML embed table into a table row (using div tables)

Question

What I'm trying to do:

Notice there is an embedded table under that is in the place of the new row. The idea is this would be a dropdown for a single row, upon dropping down, it would reveal a subtable. There would be existing rows under the dropdown table.

What is actually happening:

The embedded table only seems to span across the first column, but I need it to fit the width of the entire row. I originally was using HTML <table> tags but tried switching to the divTable format. Unfortunately, this didn't work either.

What am I doing wrong here?

My html:

<div class="divTable">
    <div class="divTableHeading">
        <div class="divTableRow">
            <div class="divTableHead">head1</div>
            <div class="divTableHead">head2</div>
            <div class="divTableHead">head3</div>
            <div class="divTableHead">head4</div>
            <div class="divTableHead">head5</div>
            <div class="divTableHead">head6</div>
            <div class="divTableHead">head7</div>
        </div>
    </div>
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">cell1</div>
            <div class="divTableCell">cell2</div>
            <div class="divTableCell">c3</div>
            <div class="divTableCell">c4</div>
            <div class="divTableCell">c5</div>
            <div class="divTableCell">-c6</div>
            <div class="divTableCell">c7</div>
        </div>
        <div class="divTableRow">
        <div class="divTable">
            <div class="divTableHeading">
                <div class="divTableRow">
                    <div class="divTableHead">embedded1</div>
                    <div class="divTableHead">embedded2</div>
                    <div class="divTableHead">embedded3</div>
                </div>
            </div>
            <div class="divTableBody">
                <div class="divTableRow dropdownTable">
                    <div class="divTableCell">1</div>
                    <div class="divTableCell">2</div>
                    <div class="divTableCell">3</div>
                </div>
                <div class="divTableRow dropdownTable">
                    <div class="divTableCell">1</div>
                    <div class="divTableCell">2</div>
                    <div class="divTableCell">3</div>
                </div>
            </div>
        </div>
        </div>

    </div>
</div>

My CSS:

.divTable{
    display: table;
    width: 100%;
    width: 100%;
    border: 1px solid #eeeeeea8;
    -webkit-box-shadow: 6px 9px 33px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 9px 33px -5px rgba(0,0,0,0.75);
    box-shadow: 6px 9px 33px -5px rgba(0,0,0,0.75);
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}

.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}

.divTableRow:nth-child(even){
    background-color: #f2f2f2;
}
.divTableRow:hover:not(:first-child) {
    background-color: #ddd;
}
.divTableCell, .divTableHead{
    border: 1px solid rgba(221, 221, 221, 0.836);
    padding: 8px;
}
.divTableHead{
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: rgba(251, 38, 0,.9);
    color: white;
}

Answer 1

I will give you a suggestion that I had give to myself. Unless you are developing to some old-browsers as IE11 or similar, you could use Grid CSS to build such elaborated organization without lost yourself and others in this code abyss. As you can see in Grid CSS you can have more control about how rows and columns it will behave, you can even build your application to better behave in different screens sizes (as mobile or big ones). You have almost limitless options to work with it, as your front-end code will be more fast and improve better then just use these div but like table.

I wish that could help in your path.

Answer 2

.tableHead {
  text-align: left;
  background-color: aqua;
}

.tableRow {
  text-align: left;
  background-color: bisque;
}

<table width="100%">
  <thead>
    <tr>
      <th class="tableHead" colspan="1">head</th>
      <th class="tableHead" colspan="1">head</th>
      <th class="tableHead" colspan="1">head</th>
      <th class="tableHead" colspan="1">head</th>
      <th class="tableHead" colspan="1">head</th>
      <th class="tableHead" colspan="1">head</th>
      <th class="tableHead" colspan="1">head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1">cell</td>
      <td colspan="1">cell</td>
      <td colspan="1">cell</td>
      <td colspan="1">cell</td>
      <td colspan="1">cell</td>
      <td colspan="1">cell</td>
      <td colspan="1">cell</td>
    </tr>
    <tr>
      <td colspan="7">
      <table width="100%">
        <thead>
          <tr>
            <th class="tableHead" colspan="1">embed1</th>
            <th class="tableHead" colspan="1">embed2</th>
            <th class="tableHead" colspan="1">embed3</th>
          </tr>
        </thead>
        <tbody>
          <tr class="tableRow">
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr class="tableRow">
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr class="tableRow">
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </td>
    </tr>
  
  </tbody>
</table>

try this code