Razor/Blazor矩阵指定行列高亮异常：仅行生效列无效果

Problem Root Cause #

Your column highlight isn't working because the .highlight CSS selector lacks sufficient specificity to override Bootstrap's default table cell styles. While the row highlight works (via the <tr> class) because the table row's background shows through transparent table cells, the column's <td> elements need their own background style explicitly set with a more specific selector.

Fix Steps #

1. Update CSS Selector #

Modify your CSS to target table cells directly with higher specificity:

.table td.highlight, .table th.highlight {
    background-color: yellow;
}

If Bootstrap's styles still take precedence, you can add !important (use sparingly):

.table td.highlight, .table th.highlight {
    background-color: yellow !important;
}

2. Simplify Class Condition (Optional) #

Your current condition includes redundant logic (i == 0 && j == 0 is already covered by i == 0 || j == 0). Clean up the Blazor code:

<td class="@(i == 0 || j == 0 ? "highlight" : "")">
    $@ebitMatrix[i + 3][j + 3].ToString("F2")
</td>

Explanation #

• The more specific CSS selector ensures the yellow background is applied directly to <td> and <th> elements with the highlight class, overriding Bootstrap's default styles.
• The row highlight worked because the <tr>'s background color was visible through the transparent <td> elements, but column highlights require the <td> itself to have the background style set.

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