CODEWITHSUNDEEP
cssdatatables
john
john

Reputation: 707

How to highlight the first two columns of datatable in a different color?

I'm trying to overwrite the datatables' CSS . I need the first two columns to be highlighted in grey, but the rest of the columns to have the default color.

I tried using this:

.grey {
  background-color: rgba(128, 128, 128, .25);
}
<table>
  <colgroup>
    <col class="grey" />
    <col class="grey" />
    <col />
    <col />
    <col />
    <col />

  </colgroup>
  <thead>

but the datatables' default CSS overwrites it

Upvotes: 1

Views: 588

Answers (2)

R Reveley
R Reveley

Reputation: 1584

In addition to the answer by amow above it is best to avoid class names like that.

Try instead

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

or

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

You may be able to drop the colgroup and col tags entirely and do this

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

Upvotes: 2

amow
amow

Reputation: 2223

Use chrome devtool to find out which datatables css selector overwrite yours. And try to add more selector to your css to promote your selector's weight.

For example. If the datatables css is .datatable colgroup col {bg-color:xxxx}.Change your css to .datatable colgroup col.grey {bg-color:xxx} will work.

Also simplest but not recommend, add !important to your css as 

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

Upvotes: 3

Related Questions