Bootstrap表格行内背景色异常：奇偶行仍存在颜色差异

问题原因 #

Bootstrap的table-striped类靠给<tbody>内的奇数行（tr:nth-of-type(odd)）添加半透明背景色实现条纹效果，默认是5%透明度的黑色（rgba(0, 0, 0, 0.05)）。

你给<td>加行内样式background-color: red时，<td>的背景确实会覆盖<tr>的背景，但奇数行<tr>的半透明黑色会和<td>的红色叠加，让最终颜色比纯红更深；而偶数行<tr>没有这个半透明背景，显示的是纯红色，这就造成了视觉上的差异。

这里不是行内样式优先级不够，而是背景色叠加的问题——下层<tr>的半透明背景透过<td>的背景混合出了更深的色调。

解决方法 #

方法1：移除条纹效果的半透明背景 #

如果不需要原有的条纹样式，要么直接删掉table-striped类，要么用CSS覆盖奇数行的背景：

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: transparent;
}

方法2：自定义条纹颜色（如果仍需条纹） #

如果想保留条纹但用自定义颜色，不要给<td>加行内样式，而是修改Bootstrap的CSS变量：

.table-striped {
  --bs-table-striped-bg: rgba(255, 0, 0, 0.1); /* 自定义半透明红色条纹 */
}

这样奇偶行的背景都是基于红色的深浅变化，不会出现颜色混乱。

修正后的示例代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 覆盖奇数行的半透明背景，消除颜色差异 */
    .table-striped>tbody>tr:nth-of-type(odd) {
      background-color: transparent;
    }
  </style>
</head>
<body>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="background-color: red">1</td>
      </tr>
      <tr>
        <td style="background-color: red">2</td>
      </tr>
      <tr>
        <td style="background-color: red">3</td>
      </tr>
    </tbody>
  </table>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Fun Mun Pieng