Why do my table's columns shift when a Bootstrap collapse is triggered?

Question

Using bootstrap's collapse feature, I would like to get a table's row to expand and reveal more details.

when a row is clicked, the other columns, for some reason, get a slight movement. This seems to have something to do with the LENGTH of the details but I could not figure out a bypass.

<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 move when you click me</td>
      <td>im second </td>
      <td>im 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 see the issue in this bootply example: https://www.bootply.com/HJfNNB5CPs

focus your eye on the other columns as you click the red text.

Answer 1

I'm not sure why this is happening but it seems to resolve if you explicitly set the width of the td containing the collapsable element.

td[colspan="3"] {
  width: 100%;
}

updated bootply