Nested divs with 'display: table-row-group' not laying out properly - html

Question

I'm building out a hierarchical (recursive) table using Angular. Unfortunately angular's directives are part of the HTML DOM and combined with recursion I end up with nested table elements. I am trying to use CSS table layout rather than the classic <table> elements.
Using table elements everything lays out okay:
<table>
<tr>
<td class="cell">one</div>
<td class="cell">two</div>
<td class="cell">three</div>
</tr>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</tbody>
</tbody>
</table>
But if I try to do the same things using CSS the layout gets screwed up:
<style>
.table {
display: table;
width: 100%;
table-layout: fixed;
}
.row {
display: table-row;
}
.cell {
display: table-cell
}
.nolayout {
display: table-row-group
}
</style>
<div class="table">
<div class="row">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
</div>
<div class="nolayout">
<div class="row">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
</div>
<div class="nolayout">
<div class="row">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
</div>
</div>
</div>
</div>
Here's a jsfiddle showing the problem:
http://jsfiddle.net/LjyLz2Le/7/

Answer 1

please change
.nolayout {
display: table-row-group
}
to
.nolayout div {
display: table-row-group
}
Because the nolayout class assign only for the main div, does not sub div. you need assign table-row-group for your cell div
Working Demo