Bootstrap5 flex表格斑马纹+垂直居中后td高度异常问题求解

你的问题根源判断准确：给<tr>添加d-flex类后，<td>默认失去了原生table-cell的自动撑满父级高度特性，Bootstrap条纹背景依赖的inset内阴影只能覆盖<td>本身内容高度，因此出现背景断层。
以下是两种可落地的解决方案：

方案1（优先推荐）：移除tr的flex布局，使用原生表格特性 #

Bootstrap内置的表格样式对原生table布局兼容性最好，无需额外修改样式即可适配所有内置表格类效果：

• 第一步：删除所有<tr>上的d-flex类，你已经给<table>添加了align-middle类，原生布局下会自动实现所有单元格内容垂直居中
• 第二步：如果需要实现等分列宽效果，给<table>添加table-layout: fixed样式即可，所有列会自动平分表格宽度
  修改后代码示例：

<!-- 表格标签 -->
<table class="table table-striped table-hover table-bordered text-break border-light text-center align-middle my-4" style="table-layout: fixed;">
<!-- 行代码 -->
<tr>
    <td>Voornaam</td>
    <td>Sean</td>
</tr>

该方案改动最小，不存在样式兼容问题。

方案2：保留flex布局tr，补充样式适配 #

如果因为特殊业务需求必须使用flex布局的tr，可通过拉伸td高度实现背景正常显示：

• 给所有<td>添加Bootstrap内置的align-self-stretch类，让td自动撑满tr的全高
• 同时给td内部开启flex布局实现内容垂直、水平居中
  修改后代码示例：

<tr class="d-flex">
    <td class="col d-flex align-items-center justify-content-center">Voornaam</td>
    <td class="col d-flex align-items-center justify-content-center">Sean</td>
</tr>

如果仍有背景显示异常，可添加自定义CSS直接覆盖背景逻辑，彻底规避inset阴影的适配问题：

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bs-table-striped-bg);
  box-shadow: none;
}

内容的提问来源于stack exchange，提问作者Sean van Beurden