无法使用引导程序将文本颜色应用于表格行

Question

我使用的是bootstrap 5.3。我想在整个表格行中应用文本颜色。

<tr class="fw-bold text-primary">
   <td>Java</td>
   <td>Php</td>
   <td>Javascript</td>
   <td>Go</td>
</tr>

` 在上面的示例代码中。应用 fw-bold，行中的整个文本变为粗体。但行中文本的颜色不会改变。请注意，我不想更改背景颜色，我想更改的是文本颜色。不想通过表数据来完成（td）

我尝试过表格主色，但它会将颜色应用于背景

Answer 1

如何使 Bootstrap 文本颜色与表格行一起使用

问题

将 Bootstrap 文本颜色应用于表格行对表格单元格文本没有影响。

有 Bootstrap 类可以更改表格主题颜色，但文本始终是浅色或深色。将颜色应用于行不起作用，因为它被主题颜色覆盖。

<!-- does not work -->
<tr class="text-primary"><td>Hello World</td></tr> 

要更改行的颜色，您需要设置该行中每个表格单元格的文本颜色：

<!-- works -->
<tr><td class="text-primary">Hello World</td></tr> 

解决方案

需要一些自定义 CSS 才能使 Bootstrap 文本颜色与表格行配合使用。

tr.text-primary td,
tr.text-primary th {
  color: inherit;
}

这会导致单元格继承应用于行的颜色。为了避免不必要的副作用，该解决方案范围狭窄，并且不使用

!important

。单个单元格的样式仍然可以与行不同。

演示片段

tr.text-primary td,
tr.text-primary th {
  color: inherit;
}

tr.text-danger th,
tr.text-danger td {
  color: inherit;
}

/* other text colors not shown */

<table class="table table-bordered table-hover fw-bold">
  <tr class="text-primary">
    <td>Java</td>
    <td>Php</td>
    <td>Javascript</td>
    <td>Go</td>
  </tr>
  <tr class="text-danger">
    <td>Java</td>
    <td>Php</td>
    <td>Javascript</td>
    <td>Go</td>
  </tr>
  <tr>
    <td class="text-primary">Java</td>
    <td class="text-success">Php</td>
    <td class="text-danger">Javascript</td>
    <td class="text-secondary">Go</td>
  </tr>
</table>

<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.bundle.min.js"></script>