Question

我正在尝试覆盖数据表的CSS。我需要前两列以灰色突出显示，但其余列则具有默认颜色。

我试过用这个：

.grey {
  background-color: rgba(128, 128, 128, .25);
}

<table>
  <colgroup>
    <col class="grey" />
    <col class="grey" />
    <col />
    <col />
    <col />
    <col />

  </colgroup>
  <thead>

但是数据表的默认CSS会覆盖它

Answer 1

使用chrome devtool找出css选择器覆盖你的数据表。并尝试在css中添加更多选择器以提升选择器的重量。

例如。如果数据表css为.datatable colgroup col {bg-color:xxxx}。将您的css更改为.datatable colgroup col.grey {bg-color:xxx}即可。

同样最简单但不建议，将!important添加到您的css

.grey {
      background-color: rgba(128,128,128,.25)!important;
    }

Answer 2

除了上面给出的答案之外，最好避免使用类似的类名。

尝试改为

table colgroup[semantic class name if needed] col:nth-child(1),
table colgroup[semantic class name if needed] col:nth-child(2) {
      background-color: rgba(128,128,128,.25);
}

或

table colgroup[semantic class name if needed] col:first-child,
table colgroup[semantic class name if needed] col:first-child+col {
      background-color: rgba(128,128,128,.25);
}

您可以完全删除colgroup和col标签并执行此操作

table td:first-child,
table td:first-child+col {
      background-color: rgba(128,128,128,.25);
}

如何突出显示不同颜色的前两列数据表？

2 个答案: