如何在满足后端变量条件时隐藏<table>的最后一列？

针对你遇到的问题，这里有几个比逐行写@if更简洁的实现方式：

方案1：给最后一列的所有<td>统一添加动态类 #

利用后端变量控制CSS类的添加，再通过CSS隐藏整个列：

1. 后端渲染时，给最后一列的每个<td>加上动态类：

<tr>
    <td>内容1</td>
    <td>内容2</td>
    <td class="@(foo == -1d ? 'hidden-col' : '')">
        带<sup>上标</sup>或<sub>下标</sub>的内容
    </td>
</tr>

2. 在页面CSS中添加样式：

.hidden-col {
    display: none;
}
/* 确保子元素也被隐藏（解决sup/sub仍显示的问题） */
.hidden-col * {
    display: none !important;
}

这个方法只需要给最后一列的<td>统一加类，不用在每行写完整的@if块，维护起来更简洁。

方案2：复用后端条件片段（Razor语法） #

如果用的是ASP.NET Razor，可以把最后一列的<td>封装成可复用片段，避免重复写判断逻辑：

1. 在页面顶部定义片段：

@{
    Func<object, IHtmlContent> renderLastCol = (content) => 
    {
        if (foo != -1d)
        {
            return Html.Raw($"<td>{content}</td>");
        }
        return Html.Raw("");
    };
}

2. 每行调用这个片段：

<tr>
    <td>内容1</td>
    <td>内容2</td>
    @renderLastCol("带<sup>上标</sup>的内容")
</tr>
<tr>
    <td>内容3</td>
    <td>内容4</td>
    @renderLastCol("带<sub>下标</sub>的内容")
</tr>

这样只需要写一次判断逻辑，后续每行直接调用即可，大幅减少重复代码。

方案3：修复<col>的隐藏问题 #

你之前用<col>的visibility: collapse没完全隐藏，是因为visibility属性不会强制子元素隐藏，可结合CSS补充控制：

1. 给最后一列的<col>添加动态类：

<colgroup>
    <col>
    <col>
    <col class="@(foo == -1d ? 'collapse-col' : '')">
</colgroup>

2. 添加CSS样式：

.collapse-col {
    visibility: collapse;
}
/* 强制隐藏该列下所有单元格及子元素 */
.collapse-col ~ td,
.collapse-col ~ td * {
    display: none;
}

这个方法不需要修改每行的<td>，只需要控制<col>的类，适合列结构固定的场景。

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