当行中没有足够的项目时，动态生成 table 留在表格中

Question

我正在使用 asp.net MVC。在我的视图中，我动态生成了连续 5 个项目的 table。但是当模型没有足够的 5 个项目时我有一个问题，项目宽度将增加以填充如下所示的行：

| x | x | x | x | x | (when have >=5 item)

|    x    |    x    | (when have <5 item, in this case is 2)

| x | x |             (what I want to display)

这是我的 cshtml 代码：

<table style="width:100%;height:100%">
    @{
        int count = 0;
        foreach (var thread in Model)
        {
            if (count % 5 == 0)
            {
                @:<tr>
            }
            <td style="width:20%">
                //thread details here
            </td>
            count++;
            if (count % 5 == 0)
            {
                @:</tr>
            }
        }
    }
</table>

我可以更改为每行 2 个项目或在中使用固定宽度，但这不是我的目标。你能建议我一些改进 table 的方法吗？

Answer 1

如果我的项目小于 5，我通过在行中添加更多空白 <td> 来解决它。现在它显示我想要的

<table style="width:100%;height:100%">
@{
    int count = 0;
    foreach (var thread in Model)
    {
        if (count % 5 == 0)
        {
            @:<tr>
        }
        <td style="width:20%">
            //thread details here
        </td>
        count++;
        if (count % 5 == 0)
        {
            @:</tr>
        }
    }
    while (count%5!=0)
    {
        <td></td>
        count++;
    }
    @:</tr>
}
</table>

当行中没有足够的项目时，动态生成 table 留在表格中

Make dynamically generate table stay in form when not enough item in row

html

asp.net-mvc

foreach

view

razor