C# Blazor WebAssembly中如何避免最后一个区域的foreach后添加空td？

有两种简单的方法可以解决你遇到的最后一个元素后出现多余空td的问题：

方法一：通过索引判断是否为最后一个元素 #

先把排序后的集合存为局部变量，遍历的时候同时获取元素索引，只有当元素不是最后一个时才添加分隔用的空td：

@{
    // 先把排序后的集合转成List，方便获取索引和总数
    var sortedYears = detail.Years2Value.OrderBy(x => x.Key).ToList();
}

@foreach (var (pair, index) in sortedYears.Select((item, idx) => (item, idx)))
{
    <td colspan="1">
        <input type="text" class="radius form-control" style="background-color:transparent; border:0.1px" readonly="readonly" value=@pair.Value>
    </td>
    <!-- 只有非最后一个元素才加分隔td -->
    @if (index != sortedYears.Count - 1)
    {
        <td colspan="1" class="border-left border-right"></td>
    }
}

方法二：用CSS替代空td实现分隔（更简洁） #

直接给每个内容单元格添加右边框，通过CSS排除最后一个单元格，这样不需要额外的空td，代码更干净：

首先在组件里添加样式：

<style>
    /* 给除了最后一个的年份单元格加右边框 */
    .year-content-cell:not(:last-child) {
        border-right: 1px solid #ccc; /* 这里可以调整成你需要的边框样式 */
    }
</style>

然后修改循环代码：

@foreach (KeyValuePair<int, string> pair in detail.Years2Value.OrderBy(x => x.Key))
{
    <td colspan="1" class="year-content-cell">
        <input type="text" class="radius form-control" style="background-color:transparent; border:0.1px" readonly="readonly" value=@pair.Value>
    </td>
}

这种方法不需要额外的判断逻辑，完全靠CSS控制分隔效果，还能避免多余的DOM元素。

内容的提问来源于stack exchange，提问作者atix91