升级项目依赖后Bootstrap的table-striped表格斑马纹样式失效问题

问题根因 #

你的表格斑马纹失效是Bootstrap版本升级导致的：旧版依赖用的是Bootstrap 4.2.1，升级后版本为Bootstrap 5.1.3，Bootstrap 5调整了.table-striped的样式匹配规则：

• Bootstrap 4中.table-striped会直接匹配<table>下的所有<tr>元素，即使你没有手动写<tbody>标签也能正常生效
• Bootstrap 5中.table-striped仅匹配<tbody>下的<tr>元素，你的表格代码没有将行内容放在<tbody>标签中，因此样式无法命中

修复方案 #

方案1（推荐，适配Bootstrap 5规范） #

给你的表格添加<tbody>标签，包裹所有<tr>行，修改后的HTML代码如下：

<table class="table col-lg-4 col-sm-6 col-xs-12 table-striped table-bordered table-sm" >
  <tbody>
    <tr>
      <th>Lab Name</th><td>{{ session?.lab_name }}</td>
    </tr>
    <tr>
      <th>Session Start Time</th><td>{{ session?.session_start_time.split("T")[0] }} {{ session?.session_start_time.split("T")[1] }}</td>
    </tr>
    <tr>
      <th>Task Protocol</th><td>{{ session?.task_protocol }}</td>
    </tr>
    <tr>
      <th>Session UUID</th><td>{{ session?.session_uuid }}</td>
    </tr>
    <tr>
      <th>User</th><td>{{ session?.responsible_user }}</td>
    </tr>
    <tr>
      <th>Session Project</th>
      <td>{{ session?.session_project }}</td>
    </tr>
  </tbody>
</table>

方案2（临时兼容，无需修改HTML结构） #

在全局样式文件中添加自定义CSS，覆盖Bootstrap 5的默认规则：

.table-striped tr:nth-child(even) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

方案3（回退版本） #

如果不需要使用Bootstrap 5的新特性，可以将package.json中的bootstrap版本改回^4.2.1，重新安装依赖即可恢复原有效果。

补充验证 #

修改完成后清理浏览器缓存，重启开发服务刷新页面即可看到斑马纹效果恢复。如果修改后仍未生效，可打开浏览器开发者工具检查表格元素的样式，确认是否存在Angular Material的表格样式优先级高于Bootstrap样式的情况，若存在可调整样式引入顺序（优先引入Angular Material样式，再引入Bootstrap样式）或者给自定义样式加!important提升优先级。

内容的提问来源于stack exchange，提问作者Carlos Ortiz