How can I fix this Blazor/Bootstrap 5 CSS issue with "striped" tables?

Question

Trying to resolve a CSS issue that involves Bootstrap 5 "table-striped" and Blazor Razor component display.

I have a simple Blazor/Bootstrap 5 page where I display a table of content pulled from a service at runtime. The content is retrieved and displayed. I do see the Bootstrap CSS for a moment (an initial flash on page load), then the Bootstrap striped CSS seem to be getting overridden by some other dynamic styles that I cannot identify anywhere. In Chrome/Edge dev tools, there are no CSS styles applied to the table except the ones I've specified. The table ends up as a simple black and white table, which is incorrect.

I'm using a very basic table format with the new striped CSS as follows:

<table class="table table-striped table-success">
    <thead>
        <tr>
            <th width="2%" class="text-center" scope="col">ID</th>
            <th width="98%" scope="col">Detail</th>
        </tr>
    </thead>
@if (eventList.Any())
{
    foreach (var e in eventList.Take(5).ToList())
    {
        <tr>            
            <td>@e.blahblah</td>
            <td>@e.blahblah</td>
        </tr>
    }
}
</table>

Dynamic Table Content - Bootstrap 5 CSS not working

I also removed the possibility that it is the TR/TD generation causing the issue using this approach (which is just to test my theory):

<table class="table table-striped table-success">
    <thead>
        <tr>
            <th class="text-center" scope="col">ID</th>
        </tr>
    </thead>
    <tr>
        <td class="text-center">
            @if (eventList.Any())
            {
                foreach (var e in eventList.Take(5).ToList())
                {
                    @e.blahblah
                }
            }
        </td>
    </tr>
</table>

However, the Bootstrap 5 CSS is still overridden by Blazor when it gets rendered/displayed. After the initial page load flash (where I see the styling for a split second), the table CSS goes to the simple black and white format.

---

To establish a control to start from, I dropped in some basic/static code and the striped table works perfectly. No issues. The colored, striped table displays properly. For example:

<tr>
    <td>Foo</td>
    <td>Too</td>
</tr>
<tr>
    <td>Foo</td>
    <td>Too</td>
</tr>
<tr>
    <td>Foo</td>
    <td>Too</td>
</tr>

Static Table Content - Bootstrap 5 CSS works

This seems to be a bug with the Blazor rendering engine (?). How can I get the Blazor runtime tabular content to retain the Bootstrap 5 styling? What is overriding the CSS?

Please advise.

Answer 1

Thanks for the info Uxonith. By way of an answer, the issue was simply a missing wrapper around the / content. For example...

<table class="table table-striped table-success">
    <thead>
        <tr>
            <th width="2%" class="text-center" scope="col">ID</th>
            <th width="98%" scope="col">Detail</th>
        </tr>
    </thead>
    <tbody>
        @if (eventList.Any())
        {
            foreach (var e in eventList)
            {
                <tr>
                    <td class="text-center">@e.Id</td>
                    <td>@e.EventInfo</td>

                </tr>
            }
        }
    </tbody>
</table>