How to CSS tree-view?

Question

I have created a tree-view using angular2. And it has following basic layout:

tree-view basic layout

The HTML code behind for this is as follows:

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

The CSS code behind for this is as follows:

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

However, I want this tree-view to be displayed in a table, i.e. whenever it is expanded, every child element should be displayed as a row of table. I'm adding desired layout image below: Tree-View desired layout

Can someone please help me in this?