Bootstrap Collapse Within Table/between Table Rows Not Working

I have a question regarding the Bootstrap collapse feature. I'm pretty sure that I'm overlooking something quite obvious or easy to fix, but I googled it alot and played with the c

Solution 1:

To collapse a table row, you should write extra css for the collapsed row:

table .collapse.in {
    display: table-row !important;
}

It will fix the display issue after the row expanded.

Solution 2:

Hi I'm sorry I won't have a satisfying answer. It is not allowed to have anything other than <tr> elements as descendants of <tbody> so your HTML is not valid. This is what causes the glitchy behavior. Your best bet is to wrap every part of your form in a new table element.