如何使用CSS树视图？

Question

我使用angular2创建了一个树视图。它有以下基本布局：

tree-view basic layout

这背后的HTML代码如下：

<div class = "allTopics">
    <ul>
        <li *ngFor = "let topic of directories">
            <span class = "iconButton" (click) = "topic.toggle()"> {{topic.getIcon()}}</span>
            <span class = "subtopics">{{topic.mainTopic}}</span>
            <div *ngIf = "topic.expanded">
                <ul>
            <span *ngFor="let subtopic of topic.subTopics"><a  href=#>{{subtopic}}</a></span>
          </ul>
                <tree-view  [directories] = "topic.directories"></tree-view>
            </div>
        </li>
    </ul>
</div>

这背后的CSS代码如下：

ul{
    list-style-type: none;
    color: #000;
}

.iconButton{
    font-size: 20px;
    margin-right: 5px;
    cursor:pointer;
}

tr{
    border: 1px solid black;
    border-collapse: collapse;
}
tr{
    padding: 15px;
}

.allTopics {
    border-style: none;
}

但是，我希望这个树视图显示在一个表中，即每当它被展开时，每个子元素都应该显示为一行表。我在下面添加了所需的布局图： Tree-View desired layout

有人可以帮我吗？