How to split a table into parts (preserving column sizes)?

Question

css

In general, there is a table.
It contains some information. On the last line there is a "show more" button.
Through bootstap collapse I concluded, but!
But I have separated the tables via tbody. And tbody cannot animate height. And because of this, new elements appear abruptly and twitchy ... But it should be smooth.
I found a way out, but it seems to me that it is too crutch. We just make the additional lines that should appear after clicking into a separate table, and wrap them in a DIV, which can already be smoothly folded. But here is another problem, the tables diverge a little bit...
Question: How can I put part of the table into a div?
Or maybe there is another way?

Answer 1

codepen.io/anon/pen/RryLZG
(animated property changed, CSS-transform support required, minus - information under the table still jumps)