将集合呈现到每行“n”个条目的html表中的最干净的方法是什么答案

【问题标题】：What is the cleanest way to render a collection into a html table with "n" number of entries per row将集合呈现到每行“n”个条目的html表中的最干净的方法是什么
【发布时间】：2023-04-03 12:35:02
【问题描述】：

我有一个 asp.net-mvc 网站。在我的视图模型中，我有一组要显示在 HTML 表上的汽车。

我想每行展示 5 辆汽车，所以我开始这样：

<table>
  @foreach (var car in Model.Cars) {
    if (counter == 0) {
      <tr>
    }
    <td>@car.Name</td>
    counter++;
    if (counter == 5) {
      </tr>
    }
  }
</table>

问题是我觉得上面的代码有点老套，如果我有 7 辆汽车，我应该在最后一行放 3 个空白 <td>s 还是将其删掉（又是更老套的代码）？

我想看看在 asp.net-mvc 中是否有一种更简洁的方式来在表格中显示一个集合，并且表格中的某一行具有特定数量的条目。

【问题讨论】：

使用左浮动的 DIV 元素。 现场演示： jsfiddle.net/9v9WJ
@Šime Vidas - 您的答案是硬编码的，因此无法解决问题。我并没有质疑表格与 div 的使用。我的问题是关于收集并使其成为动态的行数。
我的“答案”不是答案，而是评论。 :)

标签： html asp.net-mvc razor collections html-table

【解决方案1】：

如果你想坚持使用桌子，这对我来说看起来最不老套

@{
    var colSize = 5;
    var rows = (int)(Model.Cars.Count() / colSize);
}

<table>
@for (var row = 0; row <= rows ; row++){
    <tr>
    @foreach(var car in Model.Cars.Skip(row * colSize).Take(colSize))
    {
        <td>@car.Name</td>
    }
    </tr>
}
</table>

如果你想用<td>元素填充最后一行，你可以把它放在<tr>前面：

@if (row == rows)
{
    for(var i=0;i<colSize -( Model.Cars.Count() % colSize); i++){
        <td></td>
    }            
}

【讨论】：

【解决方案2】：

您可以通过以下方式使这个稍微干净一点：

<table>
<tr>
@foreach (var car in Model.Cars) {
    <td>@car.Name</td>

    <!-- If we've output a fifth cell, break to a new row -->
    if (++counter % 5 == 4)
    {
        </tr><tr>
    }
}
</tr>
</table>

但是，最好改为输出具有固定宽度的块级元素并将它们向左浮动，如下所示（请原谅内联样式；-)）：

<div style="width: 300px;">
@foreach (var car in Model.Cars) {
    <div style="float: left; width: 55px;">@car.Name</div>
}
</div>

【讨论】：