DataTables скрыть/показать скрытые кнопки колонки CSS стиль

Question

Я использую

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

скрыть последний столбец в DataTable таблице. Datatable создает кнопку в первом столбце, чтобы показать/скрыть этот столбец в дочерней строке. Цвета этой кнопки устанавливаются в responsive.bootstrap.min.css:

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

Я добавил пользовательский класс первый столбец, чтобы отключить кнопку в зависимости от данных в строке:

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

I задайте класс через C# в зависимости от содержимого определенных строк.

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

Все это работает должным образом.

То, что я хочу сделать сейчас установлен цвет фона кнопки серым, когда класс ТД установлен в .NOT-активные, перезапись цвет фона.

Я попытался

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

и десяток различных комбинаций, но не похоже, чтобы правильно получить формат.

Любые предложения? Благодаря!

Добавление FSFiddle по запросу: https://jsfiddle.net/yk06fbxa/3/

Answer 1

правило CSS, который устанавливает цвет фона является

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

Чтобы изменить это, когда <td> имеет класс not-active вы можете изменить его так:

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

См. Демонстрационный файл here. Я установил td первой строки, чтобы не иметь класс not-active, чтобы убедиться, что он работает только с классом .not-active.