html - 编写一个没有行但只有一列的表

Question

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

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

<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>行数为否的第三列。返回的行数。

并按如下方式修改您的 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>
}

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