我来帮你捋清楚这个问题的根源和解决办法！你遇到的这个现象其实是Bootstrap 5.3.3表格样式的实现逻辑导致的，具体原因如下：

• Bootstrap的条纹表格（.table-striped）是通过**内阴影（inset box-shadow）**来实现条纹效果的，而不是直接设置单元格的background-color。它会给奇数行的所有单元格添加box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)，这个内阴影会完全覆盖单元格的背景色，视觉上就成了单元格的背景。
• 当你给单元格加.table-danger类时，它会把单元格的CSS变量（比如--bs-table-bg、--bs-table-striped-bg）设置为红色系的值；而给行加.table-warning类时，会给行设置黄色系的变量，但单元格的.table-danger类优先级更高，会直接覆盖这些继承来的变量。
• 对于奇数行（条纹行），条纹样式的选择器.table-striped > tbody > tr:nth-of-type(odd) > *会把单元格的--bs-table-accent-bg设置为var(--bs-table-striped-bg)，也就是.table-danger类里定义的红色系阴影色，所以哪怕你在开发者工具里看到单元格的background-color是预期的黄色，也会被这个内阴影盖住，最终显示红色。
• 而偶数行没有条纹样式的作用，单元格的内阴影是默认透明的，这时候单元格的背景色才会正常显示，所以你看到第二行的黄色是正常的。

解决办法 #

你只需要添加一段自定义CSS，强制让.table-warning行内的.table-danger单元格使用黄色背景即可：

/* 覆盖table-warning行内table-danger单元格的背景样式 */
tr.table-warning td.table-danger {
  --bs-table-bg: var(--bs-table-warning-bg);
  --bs-table-accent-bg: var(--bs-table-warning-bg);
  box-shadow: inset 0 0 0 9999px var(--bs-table-warning-bg);
}

这段代码直接针对目标元素设置变量和内阴影，优先级足够覆盖Bootstrap的默认样式，不管是奇数行还是偶数行，都能让符合条件的单元格显示黄色背景。

备注：内容来源于stack exchange，提问作者ulyssia