How to prevent children of a Bootstrap collapse resizing as the collapse collapses-CodePudding

The page I'm working on needs a collapsible element which I implemented with a Bootstrap horizontal collapse. In it there is a table. As the collapse collapses the table squishes and increases in height, both the table itself and each row, meaning the transition doesn't look smooth. This is especially noticeable when the element un-collapses since the rows don't resize till the collapse is fully expanded.

How do I keep the table consistent during the animation?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section >
  <p >
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
  </p>
  <div >
    <div  id="statcard-collapse" style="float: right;">
      <div >
        <table id="statcard-table"  width="100%" cellspacing="0" cellpadding="5">
          <tbody >
            <tr >
              <td colspan="2" >
                <h2 >Table</h2>
              </td>
            </tr>
            <tr >
              <td  width="40%">Dimensions (L-w-h)</td>
              <td >8.5 x 3.23 x 2.75 m</td>
            </tr>
            <tr >
              <td >Total weight</td>
              <td >28 tonnes</td>
            </tr>
            <tr >
              <td >Crew</td>
              <td >6</td>
            </tr>
            <tr >
              <td  valign="top">Propulsion</td>
              <td >diesel engine</td>
            </tr>
            <tr >
              <td >Speed</td>
              <td >50 km/h</td>
            </tr>
            <tr >
              <td >Range</td>
              <td >420 km</td>
            </tr>
            <tr >
              <td >Total production</td>
              <td >2020 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

The solution was apparently keeping the inline styling Bootstrap provides, namely style="width: 300px;" for the card-body.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section >
  <p >
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
  </p>
  <div >
    <div  id="statcard-collapse" style="float: right;">
      <div  style="width: 300px;">
        <table id="statcard-table"  width="100%" cellspacing="0" cellpadding="5">
          <tbody >
            <tr >
              <td colspan="2" >
                <h2 >Table</h2>
              </td>
            </tr>
            <tr >
              <td  width="40%">Dimensions (L-w-h)</td>
              <td >8.5 x 3.23 x 2.75 m</td>
            </tr>
            <tr >
              <td >Total weight</td>
              <td >28 tonnes</td>
            </tr>
            <tr >
              <td >Crew</td>
              <td >6</td>
            </tr>
            <tr >
              <td  valign="top">Propulsion</td>
              <td >diesel engine</td>
            </tr>
            <tr >
              <td >Speed</td>
              <td >50 km/h</td>
            </tr>
            <tr >
              <td >Range</td>
              <td >420 km</td>
            </tr>
            <tr >
              <td >Total production</td>
              <td >2020 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>