使用Bootstrap的CSS类时如何改变表格单元格的背景色？

t3irkdon 于 2023-03-06 发布在 Bootstrap

关注(0)|答案(1)|浏览(245)

我正在使用Bootstrap 5.0 CSS，并尝试使用我自己的一些CSS创建一个带有自定义单元格颜色的表格。color属性工作正常，但当我尝试使用background属性更改背景颜色时，Bootstrap忽略了该规则。有人知道如何修复此问题吗？
我的代码：

td.colorfy {
    background: blue;
    color: white;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

twitter-bootstrap

来源：https://stackoverflow.com/questions/66214470/how-to-change-background-color-of-table-cell-while-using-bootstraps-css-classes

1条答案

按热度按时间

9jyewag01#

只需使用!important指令覆盖 Bootstrap 设置的任何其他行为。查看here以获得更多信息。

td.colorfy {
    background: blue !important;
    color: white;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

或者在设置css规则时更具体一些：
一个二个一个一个
在bootstrap css中，颜色被指定为：

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
}

而且比你的定义更具体，它就赢了。通过更具体的 Bootstrap 或使用!important，你可以实现新的背景颜色。

赞(0）回复(0）举报 2023-03-06

我来回答

使用Bootstrap的CSS类时如何改变表格单元格的背景色？

1条答案

相关问题

热门标签

最新问答