html - 'display: table-row-group' 的嵌套 div 布局不正确

Question

我正在使用 Angular 构建分层(递归)表。不幸的是，angular 的指令是 HTML DOM 的一部分，结合递归，我最终得到了嵌套的表格元素。我正在尝试使用 CSS 表格布局而不是经典的 <table>元素。

使用表格元素一切都很好:

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

这是一个显示问题的 jsfiddle: http://jsfiddle.net/LjyLz2Le/7/

Answer 1

请更改

.nolayout {
        display: table-row-group
    }

到

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

因为 nolayout 类只为主 div 分配，不为子 div 分配。你需要为你的单元格 div

分配 table-row-group

Working Demo