Search code examples
c#razorblazor

How do I highlight both the middle column and row of a matrix using razor/blazor?


I'm trying to highlight row and col at index [3][3]. However, only the row is being highlighted. Nothing shows for the column.

For ref: This is a c#/blazor program in vs 2022.

Here's the blazor:

            <div class="table-responsive">
                <table class="table table-bordered text-center">
                    <thead class="sticky-top custom-header-style">
                        <tr>
                            <th colspan="8">EBIT Recovery and Price Simulator</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th class="highlight">FAB/Yield</th>
                            @for (int j = -3; j <= 3; j++)
                            {
                                <th class="@(j == 0 ? "highlight" : "")">[email protected](FAB + j * FabStep, 2)</th>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = -3; i <= 3; i++)
                        {
                            <tr class="@(i == 0 ? "highlight" : "")">
                                <td class="@(i == 0 ? "highlight" : "")">@((yield + i * YieldStep).ToString("F2"))%</td>
                                @for (int j = -3; j <= 3; j++)
                                {
                                    <td class="@(i == 0 || j == 0 || (i == 0 && j == 0) ? "highlight" : "")">
                                        $@ebitMatrix[i + 3][j + 3].ToString("F2")
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>

css:

.highlight {
    background-color: yellow;
}

Thank you.


Solution

  • This is because ".table-bordered td" already has a background-color:#fff;

    make it !important

    and it works:

    .highlight {
        background-color: yellow !important;
    }