Utilizing Bootstrap's collapse feature, I want to create an expanding table row that reveals more details.
When the row is clicked, the other columns seem to move slightly. It appears that this is somehow related to the length of the details, but I haven't been able to find a way around it.
<table class="table">
<thead>
<tr>
<td>title 1</td>
<td>title 2</td>
<td>title 3</td>
</tr></thead>
<tbody>
<tr>
<td data-toggle="collapse" href="#rowID">other columns shift when clicked</td>
<td>I'm second </td>
<td>I'm third</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="rowID">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</td>
</tr>
</tbody>
</table>
You can observe the issue in action in this Bootply example: https://www.bootply.com/HJfNNB5CPs
Watch closely as you click the red text to see how the other columns behave.