Html 带'的嵌套div；显示：表格行组'；布局不当

我正在使用Angular构建一个分层（递归）表。不幸的是，angular的指令是HTMLDOM的一部分，与递归相结合，我最终得到了嵌套的表元素。我试图使用CSS表格布局，而不是经典的

元素

使用表格元素，所有内容都布局良好：

<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>

一
二
三
一
二
三
一
二
三

但如果我尝试使用CSS做同样的事情，布局就会变得一团糟：

<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>

.桌子{
显示：表格；
宽度：100%；
表布局：固定；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格
}
nolayout先生{
显示：表格行组
}
一
二
三
一
二
三
一
二
三

下面是一个JSFIDLE，它显示了问题： 请换衣服

.nolayout {
        display: table-row-group
    }

到

由于

nolayout

类仅为主

div

分配，因此不会将其分为子

div

。您需要为单元格

div

---

您的小提琴与代码不匹配-已将

display:table row组

替换为

display:inline

，标记中存在显著差异。我注意到您有一个tbody作为另一个tbody的子对象。这是行不通的——最终得到的是两个连续的tbody元素（一个为空）和一个孤立的end标记。行组只能包含行，不能包含其他行组。很抱歉，小提琴被更改了。我对它进行了更新，以匹配并显示手头的问题。这个问题的重点是要有某种嵌套结构。我正在构建一个树状网格（比如文件浏览），它需要一个分层的递归结构。它只是将每个内部div转换成一个表行组，从而产生一大串行组，每个行组包含一行。很确定这会把事情搞得更糟。

 .nolayout div {
        display: table-row-group
    }