Htykuut

Creating a bootstrap collapse (accordion) inside a table cell as follows:

<table class="table table-striped">

    <tr>

        <td>...</td>

        <td>

            <div id="parent">

                <div class="">

                    <a class="btn btn-link" href="#targetDiv" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="targetDiv">Smith, T.</a>

                </div>

                <div id="targetDiv" data-parent="parent" class="collapse" style="width: 250px">

                    <div class="row">

                        <div class="col-4">User Name</div>

                        <div class="col-8">tsmith</div>

                    </div>

                    <div>...</div>

                </div>

            </div>

        </td>

    </tr>

</table>

which results in following output (on expanding the collapsed div):

On removing the accordion controls (data-toggle, data-parent, etc.), I get the following result which is what I expect for un-collapsed state in the accordion above:

Why is the div (id="targetDiv") overflowing outside the td and div (id="parent") even though it's enclosed inside those two elements?

Note: On un-collapsing the div, i get the desired result (shown in screenshot(2)) for a fraction of a sec and then it goes back to the state shown in the screenshot(1) above.