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

Posted 2023-05-07

【中文标题】DataTables 隐藏/显示隐藏列按钮 CSS 样式

【英文标题】：DataTables hide/show hidden column button CSS style

【发布时间】：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 谢谢！

我假设您正在寻找类似于以下解决方案的东西。 ***.com/questions/14307163/…

访问了该解决方案的 JSFiddle，但它似乎无法正常运行。话虽如此，我认为这样的事情可能会奏效。但是，不知道如何翻译成我的情况。

【参考方案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 类。