Tables verstecken/show ausgeblendete Spalte Taste CSS Stil

Question

Ich verwende

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

die letzte Spalte in Tabelle Datatable zu verstecken. Datatable erstellt eine Schaltfläche in der ersten Spalte, um diese Spalte in einer untergeordneten Zeile anzuzeigen/auszublenden. Die Farben dieser Taste werden in responsive.bootstrap.min.css eingestellt:

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

I gegeben, um eine benutzerdefinierte Klasse in der ersten Spalte, wie die Taste auf den Daten in der Zeile in Abhängigkeit zu deaktivieren:

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

I Setzen Sie die Klasse über C# abhängig vom Inhalt bestimmter Zeilen.

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

All dies funktioniert wie erwartet.

Was ich jetzt tun möchte, ist die Hintergrundfarbe der Schaltfläche auf grau, wenn die Klasse des td eingestellt ist .NOT aktive, über Schreib Hintergrund-Farbe.

Ich habe

versucht

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

und Dutzende verschiedener Kombinationen, aber kann nicht scheinen, um das Format korrekt zu erhalten.

Irgendwelche Vorschläge? Vielen Dank!

FSFiddle Hinzufügen wie gewünscht: https://jsfiddle.net/yk06fbxa/3/

Answer 1

Die CSS-Regel, die die Hintergrundfarbe unterscheidet, ist

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

dies außer Kraft zu setzen, wenn die <td> die Klasse hat not-active man es so ändern können:

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

Sehen Sie eine Demo here. Ich habe das td der ersten Reihe eingestellt, um nicht die not-active Klasse zu haben, um sicherzustellen, dass es nur mit der Klasse .not-active funktioniert.