如何突出顯示不同顏色的數據表的前兩列？

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}就可以。

而且簡單，但不推薦，因爲

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

Answer 2

通過amow添加!important到你的CSS除了上面的答案最好是避免類名這樣的。

嘗試，而不是

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); 
}