Looking for a solution to fix a CSS issue involving Bootstrap 5 "table-striped" and displaying Blazor Razor components.
In my Blazor/Bootstrap 5 page, I have a table displaying content fetched from a service at runtime. Initially, the Bootstrap CSS is visible briefly on page load, but then it seems like the Bootstrap striped CSS is being overridden by unknown dynamic styles. Despite checking in Chrome/Edge dev tools, no additional CSS styles are applied to the table other than the ones specified by me. The end result is a plain black and white table instead of the intended striped format.
The table's structure using the new striped CSS is quite basic:
<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 tried simplifying the table generation code as a test:
<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>
Still, the Bootstrap 5 CSS continues to be overwritten by Blazor during rendering. After the initial flash of correct styling on page load, the table reverts to a simple black and white design.
To confirm, when inserting static code into the table, the striped formatting works flawlessly:
<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 appears to be related to an issue with the Blazor rendering engine. How can I preserve the Bootstrap 5 styling for tabular content generated by Blazor at runtime? What is causing the CSS override?
Seeking guidance on how to resolve this. Thank you.