Nested display:table-row-group vs nested <tbody>

HTML

<h1>&lt;table></h1>
<table>
    <tbody>
        <tbody>    <!-- note the additional tbody -->
            <tr>
                <th>asdf</th>
                <td>asdf</td>
            </tr>
        </tbody>
    </tbody>
    <tbody>
        <tbody>
            <tr>
                <th>asdf</th>
                <td>asdf asdf</td>
            </tr>
        </tbody>
    </tbody>
</table>

<h1>&lt;div> doesn't work like the above</h1>
<div class="table">
    <div class="tbody">
        <div class="tbody">
            <div class="tr">
                <div class="th">asdf</div>
                <div class="td">asdf</div>
            </div>
        </div>
    </div>
    <div class="tbody">
        <div class="tbody">
            <div class="tr">
                <div class="th">asdf</div>
                <div class="td">asdf asdf</div>
            </div>
        </div>
    </div>
</div>

<h1>&lt;div> works here, though</h1>
<div class="table">
    <div class="tbody">
        <div class="tr">
            <div class="th">asdf</div>
            <div class="td">asdf</div>
        </div>
    </div>
    <div class="tbody">
        <div class="tr">
            <div class="th">asdf asdf</div>
            <div class="td">asdf asdf</div>
        </div>
    </div>
</div>

CSS

table,
.table {
    border-collapse: separate;
    border-spacing: .1em;
    display: table;
    width: 100%;
}

tbody,
.tbody {
    display: table-row-group;
}

th,
.th {
    background: green;
    display: table-cell;
    width: 100%;
}

td,
.td {
    background: red;
    display: table-cell;
    text-align: center;
    white-space: nowrap;
    /*width: 1%;*/
}

tr,
.tr {
    display: table-row;
}