0

I have a table where some rows are collapsed with hidden rows that show more information about its "parent" row. For readability, I want to use table striping on each row.

The issues lies with the table striping being applied to the hidden rows, and messing up the striping.

The collapsed rows show more information about the row that was originally clicked, so my goal is to have the rows that are accordioned down be the same color as the "parent" row.

I am building the table striping in CSS using:

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

and I want to inherit the back-ground color when: 

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

I have tried this with no luck:

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

This is the HTML for the "parent" row:

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

Add here is the related hidden row:

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

Any thoughts on how to proceed?

Reed Armstrong
  • 65
  • 12
  • Hi there ! Can you please add your HTML code too ? – Allan Jebaraj Aug 01 '19 at 16:26
  • Oops! Edits made above! – Reed Armstrong Aug 01 '19 at 16:31
  • Why aren't you using the built in `table-striped` class? – Anurag Srivastava Aug 01 '19 at 16:40
  • 1
    I originally was, but this would stripe the hidden rows and mess up the table striping when everything was collapsed. In areas it would be grey-grey or white-white. That is why I want to have the hidden rows the same color when expanded. – Reed Armstrong Aug 01 '19 at 16:42
  • Could you please share complete table code snippet to debug easily – Naga Sai A Aug 01 '19 at 17:29
  • I had a similar situation recently and it bugged me enough that I fixed it with javascript if you're interested – Jay Aug 01 '19 at 17:56
  • I ended up solving it with JavaScript too. I added a count for each parent row and would set the style dependent on if( x %2 === 0) set color, else set different color. Felt a little hacky, but it's a viable solution and I'd like to move forward. What was your solution? – Reed Armstrong Aug 01 '19 at 18:24
  • 1
    Hi.. please refer this link.. https://stackoverflow.com/questions/26057925/select-odd-even-child-excluding-the-hidden-child – Allan Jebaraj Aug 01 '19 at 18:39

0 Answers0