so here is the code https://codepen.io/Dobrodeetel/pen/ZEaqVap.

This code partially repeats what I have on the site. therefore questions about why it is so - unnecessary. It works like this - click on any line - an additional line appears with a table inside (you can remove it if you click again on the same line) in which there is a line when you click on which another internal table will appear (which is also removed when you click again).

Have a few questions:

1 - if you look at the third table, you can see the row overlap (css hover). the question itself is how to do the same only for the first table (it is possible for the second one as well)? i.e. write something like

.table_blur tbody:hover tr:hover td {
  background: #8981ce85;
  text-shadow: none;
}

as commented out in table_blur on line 32, the line with the second table will overlap. I need to make sure that such rows (with tables inside) are NOT repainted. I was offered an option that is also at the end of table_blur (line 37) but it does not work

2 - there is this code https://codepen.io/Dobrodeetel/pen/ExXEemr. It's about opening animation. how to apply such animation to my tables? also found this code http://jsfiddle.net/1rnc9bbm/4/. which works without js at all? Well, of course I need when pressed.

So - how to attach a similar animation to the May version? that is, opening and closing until the disappearance? I really don't care how it works. just because my table is built right away - the code with the active class does not work.

Also how to make animation relative to width? as you can see, the third table greatly stretches the ENTIRE table (on my site it’s the same and can’t be changed in any way, since the number of columns is different). how to make a stretch animation?

That's all. the answer to any question will greatly reduce my work)