数据表隐藏/显示隐藏的列按钮CSS样式

问题描述：

<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活性，在写作背景色按钮的背景颜色为灰色。

我已经试过

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

和几十种不同的组合，但似乎无法得到正确的格式。

有什么建议吗？谢谢！

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

你可以发布小提琴链接吗？ –

@PriyaPayyavula https://jsfiddle.net/yk06fbxa/3/谢谢！ – Diomedes

我假设你正在寻找类似于下面的解决方案。 http://stackoverflow.com/questions/14307163/changing-background-color-of-all-elements-with-the-same-class –

答

，设置背景色的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类。

完美，谢谢！ – Diomedes

数据表隐藏/显示隐藏的列按钮CSS样式

相关推荐