html - DataTables 隐藏/显示隐藏列按钮 CSS 样式

Question

我正在使用

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

隐藏数据表中的最后一列。 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; }

我根据某些行的内容通过 C# 设置类。

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

所有这些都按预期工作。

我现在要做的是在 td 的类设置为 .not-active 时将按钮的背景颜色设置为灰色，覆盖背景颜色.

我试过了

.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类(class)。