DataTables 隐藏/显示隐藏列按钮 CSS 样式答案

【问题标题】：DataTables hide/show hidden column button CSS styleDataTables 隐藏/显示隐藏列按钮 CSS 样式
【发布时间】：2017-05-13 01:56:15
【问题描述】：

我正在使用

<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 时按钮的背景颜色设置为灰色，而不是编写 background-color .

我试过了

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

还有十几种不同的组合，但似乎无法正确获取格式。

有什么建议吗？谢谢！

按要求添加 FSFiddle：https://jsfiddle.net/yk06fbxa/3/

【问题讨论】：

你能发个小提琴链接吗？
@PriyaPayyavula jsfiddle.net/yk06fbxa/3 谢谢！
我假设您正在寻找类似于以下解决方案的东西。 stackoverflow.com/questions/14307163/…
访问了该解决方案的 JSFiddle，但它似乎无法正常运行。话虽如此，我认为这样的事情可能会奏效。但是，不知道如何翻译成我的情况。

标签： html css asp.net datatables background-color

【解决方案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 类。

【讨论】：