DataTables hide/show hidden column button CSS style

Question

I'm using

<th class="none"></th>

to hide the last column in datatable table. Datatable creates a button in the first column to show/hide this column in a child row. The colors of this button are set in responsive.bootstrap.min.css:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec }

I added a custom class the first column as to disable the button depending on data in row:

.not-active { pointer-events: none; cursor: default; }

I set the class via C# depending on the content of certain rows.

<tr><td class='<%# DisableLink(Eval("InvoiceDate").ToString()) %>'><%# Eval("InvoiceNumber")%></td>

All this is working as expected.

What I want to do now is set the background color of the button to grey when the td's class is set to .not-active, over writing background-color.

I have tried

.not-active > table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec }

and dozen of different combinations but can't seem to get the format correctly.

Any suggestions? Thanks!

Adding FSFiddle as requested: https://jsfiddle.net/yk06fbxa/3/

I am assuming you are looking for something similar to the below solution. http://stackoverflow.com/questions/14307163/changing-background-color-of-all-elements-with-the-same-class — Priya Payyavula, Dec 28 '16 at 19:12
Visited the JSFiddle for that solution, but it doesn't seem to run correctly. That being said, I think something like that could work. However, not sure how to translated to my situation. — Diomedes, Dec 28 '16 at 19:16

score 4 · Accepted Answer · answered Dec 28 '16 at 19:14

The CSS rule that sets the background-color is

table.dataTable.dtr-inline.collapsed tbody td:first-child:before, 
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
    ...
    background-color: #31b131;
}

To override this when the <td> has the class not-active you can modify it like that:

table.dataTable.dtr-inline.collapsed tbody td.not-active:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th.not-active:first-child:before
{
    background-color:#dddddd;
}

See a demo here. I have set the td of the first row not to have the not-active class to make sure that it only works with the .not-active class.

DataTables hide/show hidden column button CSS style

1 Answers1