Question

我有一个HTML表格。它有3列。第一列是name。第二个是School，第三个是HomeAddress。

该表从DB加载记录，因此行数可能会不时变化。第3列（HomeAddress）应该没有行，而其他2列（name和school）可以有更多行。我应该如何建模HTML表以使第3列没有行？

<table border="1">
    <tr>
        <th>
            Name
        </th>
        <th>
            School
        </th>
        <th>
            Home Address
        </th>
    </tr>

@foreach (var i in Model.allPpl)
{
    <tr>
        <td>
     @Html.DisplayFor(modelItem => i.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => i.school)


        </td>
        <td>
            // THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
        </td>
</tr>
}

Answer 1

我认为这些条目会对您有所帮助：

http://www.w3schools.com/tags/att_td_rowspan.asp

http://www.w3schools.com/tags/att_td_colspan.asp

Answer 2

Rowspan属性是您唯一的朋友。

对于第三列，请尝试<td rowspan="rowcount"></td>，其中rowcount为no。返回的行。

修改你的foreach循环如下：

 @bool flag=false;
 @foreach (var i in Model.allPpl)
 {
  <tr>
     <td>
   @Html.DisplayFor(modelItem => i.name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => i.school)


    </td>
    if(!flag){
    <td rowspan="@Model.allPpl.count">
        // THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
    </td>
     }flag=true;
</tr>
}

注意：我没有测试过这个剃刀视图代码，所以如果显示任何内容，请注意编译器错误。

对没有行但只有一列的表进行编码

2 个答案: