如何解决"striped"表的此 Blazor/Bootstrap 5 CSS 问题？

Question

试图解决涉及Bootstrap 5的CSS问题"表条纹"；和Blazor Razor组件显示器。

我有一个简单的Blazor/Bootstrap 5页面，其中显示了运行时从服务中提取的内容表。检索并显示内容。我确实看到了Bootstrap CSS(页面加载时的初始闪光(，然后Bootstrap条纹CSS似乎被其他一些我无法识别的动态样式覆盖了。在Chrome/Edge开发工具中，除了我指定的样式外，表中没有应用任何CSS样式。这张桌子最终变成了一张简单的黑白桌子，这是不正确的。

我使用了一个非常基本的表格格式和新的条纹CSS，如下所示：

<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>

动态表内容-引导5 CSS不工作

我还使用这种方法消除了TR/TD生成导致问题的可能性(这只是为了测试我的理论(：

<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>

然而，Bootstrap 5 CSS在渲染/显示时仍被Blazor覆盖。在最初的页面加载flash(我在那里看到了一瞬间的样式(之后，表CSS变成了简单的黑白格式。

---

为了建立一个开始的控件，我插入了一些基本/静态代码，条带表工作得很好。没有问题。彩色条纹表显示正确。例如：

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

静态表内容-引导5 CSS作品

这似乎是Blazor渲染引擎的一个错误(？(。如何获取Blazor运行时表格内容以保留Bootstrap 5样式？什么是覆盖CSS？

请告知。

Answer 1

感谢Uxonith提供的信息。作为回答，这个问题只是围绕/content缺少了一个包装。例如

<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>