How to create nested cells inside the same table TD

Question

I have the following table:-

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach(var permisionMag in Model.PermisionManagement)
        {
            <tr>
                <td>@permisionMag.Name</td>
                @{
                    int i = 0;
                    <td class="f">
                        @foreach(var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) {
                            @(i+1)  @item.Name  
                            i = i + 1;
                        }
                        <br />           
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

But currently i need the second column to have nested rows instead of showing the rows inside the same TD? any advice on this?

Answer 1

You can not generate directly table cells, you have to generate a new table inside the second table cell. You could also render @item.Name as a span/div and style that to create the illusion of a nested table(jsFiddle example).