Datatable responsive and striped

Vaielab

While using a basic responsive DataTable like the one found here: https://datatables.net/extensions/responsive/examples/initialisation/option.html , I am seeking a solution to maintain row striping, where child rows inherit the same color as their parent rows.

In the provided example, the first row "Airi Satou" is gray, and the second row "Angelica Ramos" is white. However, when expanding the child row of "Airi Satou," the child row appears white, and "Angelica Ramos" turns gray. This inconsistency can be confusing, as it becomes unclear whether the child row belongs to the row above or below.

Ensuring that child rows retain the same background color as their parent rows would greatly enhance clarity. This issue is particularly pronounced when using the "Responsive.display.childRowImmediate" option, where the absence of a down arrow further complicates visual distinction.

Any guidance on how to achieve this would be greatly appreciated.

allan

I agree! Unfortunately I don't currently have a good answer. The row striping is performed using CSS's :nth-child() and there is no way in that to skip a row. It would be possible to apply the same background to the child row using a consecutive selector, but then it would be the same colour as the next row!

It is something I've puzzled over a bit, and keep coming back to. Perhaps one day I'll have a better answer! Sorry.

Allan

Vaielab

Hello,
After some digging around, I may have found a solution with "nth-child of" (based on caniuse.com, at the moment, almost 93% of browser support this)
Here are my css to fix the problem:

table.dataTable > tbody > tr:nth-child(even of :not(.child)) > td, 
table.dataTable > tbody > tr:nth-child(even of :not(.child)) + .child > td {
  background-color: #f9f9f9;
}

table.dataTable > tbody > tr:nth-child(odd of :not(.child)) > td, 
table.dataTable > tbody > tr:nth-child(odd of :not(.child)) + .child > td {
  background-color: #eee;
}

I made a small example https://live.datatables.net/pacucusi/2/edit

By the way, I had to change the background of td and not tr directly because of responsive.dataTables.css line 83-85:

table.dataTable > tbody > tr.child:hover {
  background: transparent !important;
}

If I wanted to change the background of the tr, I would have to use !important as well. Any reason why the !important is there, since it's the default css and having to change override it would make it harder for custom css?

allan

There will be a reason - I try not to use !important if I can. I'm afraid I can't recall what it is off the top of my head though.

That looks like it might be a very viable option. Thank you for introducing me to it. I've got a note to look at that as an option in detail. I think it might be difficult with the styling integration, but difficult never stopped me before

Allan