0

For an Angular application I try to add an animation to add and remove a table row to/from a table. For this, I want to expand and collapse a single table row.

I need to have an initial and final css state. For the initial state I want to set the height of the table row to 0px but even when I try to add the following styling, the table row is still not set to 0px;

tr, tr * {
   height: 0px !important;
   overflow: hidden;
   line-height: 0px !important;
}

enter image description here enter image description here

How can I totally collapse a single table-row DOM element?

EDIT: It is not the actual situation, but this fiddle might be a good comparable situation; http://jsfiddle.net/mLk5w26n/

Klyner
  • 3,983
  • 4
  • 26
  • 50
  • did you try adding custom class for each row and then changing it? maybe somewhere something is overriding it? by the way changing all tr's by "tr, tr *" is not a good way of styling, it is much better to give it custom class, if not on tr just add it on parent element – Sowam Apr 14 '21 at 12:46
  • I try adapting the css code using the browser dev tools. Putting :last-child selector for example can focus it on just the latest row. – Klyner Apr 14 '21 at 12:51
  • 1
    You can share the code ? – Mohammad reza Golshahi Apr 14 '21 at 12:54
  • Check the jsfiddle – Klyner Apr 14 '21 at 14:34

0 Answers0