Nested DIV table displays incorrectly - html

Question

I have problems coding a nested DIV table:
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
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;
}
.divTable2 {
display: table;
width: 100%;
}
.divTable2Row {
display: table-row;
}
.divTable2Cell,
.divTable2Body {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<!-- this row contains a nested 2x2 table -->
<div class="divTableCell">outer left </div>
<div class="divTableCell">outer right
<div class="divTable2">
<div class="divTable2Body">
<div class="divTable2Row">
<div class="divTable2Cell">inner 1st line left</div>
<div class="divTable2Cell">inner 1st line right</div>
</div>
<div class="divTable2Row">
<div class="divTable2Cell">inner 2nd line left</div>
<div class="divTable2Cell">inner 2nd line right</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableRow">
<!-- no nested table here -->
<div class="divTableCell">outer left</div>
<div class="divTableCell">outer right</div>
</div>
</div>
<!-- end div divTable Body -->
</div>
<!-- end div divTable -->
https://jsfiddle.net/jsrookey/0z0agxad/
The nested table cells are not on the same table row line, but underneath each other, strangely.

Answer 1

That's because .divTable2Cell has display: table-row-group; instead of display: table-cell;.
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTable2Cell,
.divTableHead {
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;
}
.divTable2 {
display: table;
width: 100%;
}
.divTable2Row {
display: table-row;
}
.divTable2Body {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<!-- this row contains a nested 2x2 table -->
<div class="divTableCell">outer left </div>
<div class="divTableCell">outer right
<div class="divTable2">
<div class="divTable2Body">
<div class="divTable2Row">
<div class="divTable2Cell">inner 1st line left</div>
<div class="divTable2Cell">inner 1st line right</div>
</div>
<div class="divTable2Row">
<div class="divTable2Cell">inner 2nd line left</div>
<div class="divTable2Cell">inner 2nd line right</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableRow">
<!-- no nested table here -->
<div class="divTableCell">outer left</div>
<div class="divTableCell">outer right</div>
</div>
</div>
<!-- end div divTable Body -->
</div>
<!-- end div divTable -->
FWIW you have some unnecessary duplication in CSS classes, i.e. the following are the same:
.divTable, .divTable2
.divTableBody, .divTable2Body
.divTableRow, .divTable2Row
.divTableCell, .divTable2Cell
etc.
Merge them into a single class.
.table {
display: table;
width: 100%;
}
.tbody {
display: table-row-group;
}
.thead {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.tfoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.tr {
display: table-row;
}
.td,
.th {
display: table-cell;
padding: 3px 10px;
}
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td">outer left </div>
<div class="td">outer right
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td">inner 1st line left</div>
<div class="td">inner 1st line right</div>
</div>
<div class="tr">
<div class="td">inner 2nd line left</div>
<div class="td">inner 2nd line right</div>
</div>
</div>
</div><!-- .table -->
</div>
</div>
<div class="tr">
<div class="td">outer left</div>
<div class="td">outer right</div>
</div>
</div>
</div>