如何在同一个表 TD 中创建嵌套单元格答案

【问题标题】：How to create nested cells inside the same table TD如何在同一个表 TD 中创建嵌套单元格
【发布时间】：2013-08-13 13:21:58
【问题描述】：

我有下表：-

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

但目前我需要第二列有嵌套行而不是显示同一 TD 内的行？对此有何建议？

【问题讨论】：

您到底想在哪里嵌套行？您能否提供一些通用 HTML，按照您希望实际代码的方式设置？

标签： html razor

【解决方案1】：

您可以在第一列上使用 rowspan ：

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

                i = i + 1;
                if( i > 1) {
                   </tr><tr>
                }
                <td class="f">
                     @(i+1)  @item.Name  
                </td>
              }
            }
        </tr>
        }
    </tbody>
</table>

See expecting result

希望对你有帮助。

【讨论】：

我厌倦了上述但没有工作的行将相互嵌套。

【解决方案2】：

您不能直接生成表格单元格，您必须在第二个表格单元格内生成一个新表格。您还可以将 @item.Name 渲染为 span/div 和样式，以创建嵌套表的错觉 (jsFiddle example)。

【讨论】：

我在原始表中创建了一个表，它给了我几乎我需要的东西..

【解决方案3】：

如果我理解您的问题，那么您可能想要这样做：

@foreach(var permisionMag in Model.PermisionManagement) {
    <tr>
    <td rowspan="@permisionMag.TechnologyTypes.Count()">@permisionMag.Name</td>

    @{int i = 0;
    @foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) {
        <td class="f">
            @(i+1)  @item.Name
            i = i + 1;
        </td>
        </tr>
        <tr>
        }
    </tr>
    }
}

但它本质上应该为您构建这样的东西：

----------------
| Name | Item1 |
|      | ----- |
|      | Item2 |
|      | ----- |
|      | Item3 |
|      | ----- |
|      | Item4 |
----------------

【讨论】：

哈！你是对的 - 我忘记了我的 TR。更新 JSFiddle：jsfiddle.net/6KJ3m/1 并立即更新代码
我认为没有错字... :)