異なる色のデータテーブルの最初の2つの列を強調表示するにはどうすればよいですか？

Question

私は、datatablesのCSSを上書きしようとしています。最初の2つの列を灰色で強調表示する必要がありますが、残りの列はデフォルトの色を使用する必要があります。

は、私はこれを使用してみました：

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

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

 
    </colgroup> 
 
    <thead>

が、DataTableのデフォルトのCSSはCSSセレクタがあなたを上書きするDataTableのかを調べるためにそれを

Answer 1

使用クロムdevtoolを上書きします。セレクタの体重を増やすために、あなたのCSSにセレクタを追加してみてください。

たとえば、 datatablesの場合は、.datatable colgroup col {bg-color:xxxx}です。.datatable colgroup col.grey {bg-color:xxx}にあなたのCSSを変更します。お勧め

また最も簡単ではなく、その上amowによって解答に加えて

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

Answer 2

としてあなたのCSSに!importantを追加するようなクラス名を避けるのがベストです。

が代わりにしてみ

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

を行うことができます