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。您需要为您的单元格table-row-group

指定div

带有'display：table-row-group'的嵌套div没有正确布局

1 个答案:

Working Demo