时间戳

首页 > 解决方案 > 折叠的表行继承父级的背景颜色

html - 折叠的表行继承父级的背景颜色

问题描述

我有一个表格，其中一些行被隐藏的行折叠起来，显示有关其“父”行的更多信息。为了便于阅读，我想在每一行上使用表格条带化。

问题在于表条带被应用于隐藏的行，并弄乱了条带。

折叠的行显示有关最初单击的行的更多信息，因此我的目标是使折叠的行与“父”行的颜色相同。

我正在使用 CSS 构建表格条带化：

    tr:nth-child(even)
{
  background-color: white;
}

我想在以下情况下继承背景颜色：

tr[aria-expanded="true"]
{
    background-color: white;
}
tr[aria-expanded="false"] tr:nth-child(even)
{
    background-color: inherit;
}

我试过这个没有运气：

tr[aria-expanded="true"] tr:nth-child(even)
{
    background-color: inherit;
}
tr[aria-expanded="false"] tr:nth-child(even)
{
    background-color: inherit;
}

这是“父”行的 HTML：

<tr data-toggle="collapse" data-target=".lineItem14"><td class="workQueueTable" id="lineItemId">Search - Judgments</td></tr>

在此处添加相关的隐藏行：

<tr class="lineItem14 collapse" aria-expanded="false" style="height: 0px;"><td class="workQueueTable"> <b>Address: </b> /td></tr>

关于如何进行的任何想法？

标签： htmlcsstwitter-bootstrap-3

解决方案

推荐阅读