Blazor component in ASP.NET Core 8 MVC app missing global CSS classes

Question

I have an ASP.NET Core 8 MVC application in which I have included a Blazor component. The component simply renders a table with data it retrieves itself. The site uses a single minified and bundled css file in wwwroot/css/main.min.css. It bundles a themed Bootstrap 5 built from source with a few custom + utility classes.

My component's functionality is working fine - but it just won't render the BS5 table correctly!

This is how the table is rendering:

If I comment out my blazor.server.js script tag in _Layout.cshtml, I get this (which is the intended layout):

Oddly - the reddish titles are being respected but the Bootstrap 5 standard table layout (padding and bottom borders) disappears. With the blazor.server.js included - hitting F5 I do see momentarily that the CSS is being respected before being removed.

For reference the markup in the Blazor component is simply this:

<div class="mt-4 row">
    <div class="col-md-6">
        <table class="table table-hover p9-sched-table user-select-none">
            @foreach (var month in _dateItems)
            {
                <tr>
                    <td colspan="3" class="p9-sched-month">@month.MonthTitle</td>
                </tr>

                @foreach (var date in month.DateList)
                {
                    <tr class="slct-row" @onclick:preventDefault @onclick="(args) => LoadCourseDateBlock(args, date.CourseDateBlock)">
                        <td class="text-center">@date.CourseDate.BookingDate.ToString("dd")</td>
                        <td class="text-center">@date.CourseDate.BookingDate.ToString("ddd")</td>
                        <td>@date.Course.Title</td>
                    </tr>
                }
            }
        </table>
    </div>
</div>

Any pointers gratefully received.

I'm not using CSS Isolation and have looked at the options to switch that off completely just in case but that hasn't worked. I've ensure that all link tags use the ~/ format and I have a

in the head of my layout page.

Answer 1

Typically, I stumble on the answer a few mins after posting.

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

Basically - I missed out the tbody tag. Always the simple things.