Question: DataTables hide/show hidden column button CSS style


DataTables hide/show hidden column button CSS style

Answers 1
Added at 2016-12-28 19:12

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:

nr: #1 dodano: 2016-12-28 20:12

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

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.

Source Show
◀ Wstecz