así que aquí está el código https://codepen.io/Dobrodeetel/pen/ZEaqVap .

Este código repite parcialmente lo que tengo en el sitio. por lo tanto, preguntas sobre por qué es tan - innecesario. Funciona así - clic en cualquier línea - aparece una línea adicional con una tabla dentro (puedes eliminarla si vuelves a hacer clic en la misma línea) en la que hay una línea al hacer clic en la que aparecerá otra tabla interna (que también se elimina al hacer clic de nuevo).

Tiene algunas preguntas:

1: si observa la tercera tabla, puede ver la superposición de filas (css hover). la pregunta en sí es cómo hacer lo mismo solo para la primera tabla (también es posible para la segunda)? es decir, escribe algo como

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

como se comentó en table_blur en la línea 32, la línea con la segunda tabla se superpondrá. Necesito asegurarme de que esas filas (con tablas adentro) NO se vuelvan a pintar. Me ofrecieron una opción que también está al final de table_blur (línea 37) pero no funciona

2 - existe este código https://codepen.io/Dobrodeetel/pen/ExXEemr . Se trata de la animación de apertura. ¿Cómo aplicar dicha animación a mis tablas? también encontré este código http://jsfiddle.net/1rnc9bbm/4/ . que funciona sin js en absoluto? Bueno, por supuesto que necesito cuando se presiona.

Entonces, ¿cómo adjuntar una animación similar a la versión de mayo? es decir, abriendo y cerrando hasta la desaparición? Realmente no me importa cómo funciona. solo porque mi tabla se construye de inmediato, el código con la clase activa no funciona.

También, ¿cómo hacer una animación relativa al ancho? como puede ver, la tercera tabla estira en gran medida TODA la tabla (en mi sitio es lo mismo y no se puede cambiar de ninguna manera, ya que el número de columnas es diferente). ¿Cómo hacer una animación de estiramiento?

Eso es todo. la respuesta a cualquier pregunta reducirá en gran medida mi trabajo)