Bootstrap 5条纹表格行文本颜色全局设置问题求助

问题根源是Bootstrap 5的.table-striped组件通过tr:nth-of-type(odd)伪类给条纹行（奇数行）单独设置了文本颜色变量--bs-table-striped-color，优先级高于直接加在.table上的颜色类，导致只有偶数行继承表格的文本颜色，奇数行仍用默认值。

下面提供两种无需为每个表格写专属样式的解决方案：

方案一：利用CSS变量全局适配（推荐） #

Bootstrap 5大量使用CSS变量，我们可以通过自定义变量统一控制全行文本颜色，同时覆盖条纹行的颜色变量：

1. 先在全局样式中添加一段通用规则：

.table-striped-custom {
  --bs-table-color: var(--custom-table-text);
  --bs-table-striped-color: var(--custom-table-text);
}

2. 给每个表格添加上述类，并通过内联样式指定专属文本颜色：

<!-- 红色文本的条纹表格 -->
<table class="table table-striped table-striped-custom" style="--custom-table-text: #dc3545;">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1内容</td>
      <td>行1内容</td>
    </tr>
    <tr>
      <td>行2内容</td>
      <td>行2内容</td>
    </tr>
  </tbody>
</table>

<!-- 绿色文本的条纹表格 -->
<table class="table table-striped table-striped-custom" style="--custom-table-text: #198754;">
  <!-- 表格内容 -->
</table>

这种方式只需定义一次全局规则，所有表格都能通过自定义变量快速设置专属文本颜色，完全符合你“多个表格各有专属颜色”的需求。

方案二：通过选择器强制继承颜色 #

如果不想用CSS变量，也可以通过CSS选择器让条纹行强制继承表格的文本颜色：

1. 添加全局样式：

.table-striped.table-inherit-color tr:nth-of-type(odd) {
  color: inherit;
}

2. 给表格添加Bootstrap自带的文本颜色类（如text-primary、text-success）和上述自定义类：

<table class="table table-striped table-inherit-color text-primary">
  <!-- 表格内容 -->
</table>

<table class="table table-striped table-inherit-color text-warning">
  <!-- 表格内容 -->
</table>

这里的核心是让tr:nth-of-type(odd)的颜色继承自表格本身的颜色，覆盖Bootstrap默认的条纹行文本颜色设置。

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