DataTables hide/show 隐藏列按钮 CSS 样式

Question

我正在使用

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

隐藏数据中的最后一列table table。 Datatable 在第一列中创建一个按钮，以在子行中 show/hide 此列。此按钮的颜色设置在 responsive.bootstrap.min.css:

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

我在第一列添加了自定义 class 以根据行中的数据禁用按钮：

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

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

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

所有这些都按预期工作。

我现在要做的是在td的class设置为.not-active[=41=时，设置按钮的背景色为灰色]，改写背景色。

我试过了

.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> 具有 class 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 class 以确保它仅适用于 .not-active class。

DataTables hide/show 隐藏列按钮 CSS 样式

DataTables hide/show hidden column button CSS style

html

css

asp.net

datatables

background-color