Le démarrage caché (basé sur l'élément parent) perturbe le style de l'enfant avec Bootstrap 4

Je veux ajouter une classe à une DIV parentale qui affecte beaucoup d'élemnets intérieurs. Mais quand je fais cela avec Bootstrap, le style est foiré.

Ce code montre le problème sur 2 où vous pouvez voir que la bordure inférieure est mal alignée. Si je fais juste un .toggle (". Second") sur l'élément à la place, cela fonctionnera.

https://www.bootply.com/KOJ4VKNbOa

.second {
   display: none;
}

.show-inner .second {
    display: block;
} 

   <div id="outer">
      <table class="table">
        <thead>
          <tr>
            <th class="first">A</th>
            <th class="second">B</th>
            <th class="third">C</th>  
          </tr>
        </thead>
        <tbody>
          <tr>
            <td width="98%" class="first">1</td>
            <td width="1%" class="second">2</td>
            <td width="1%" class="third">3</td>
          </tr>
        </tbody>
      </table>
    </div>

    <button onclick="$('#outer').toggleClass('show-inner');">Toggle .second</button>

Dans mon projet, j'aimerais avoir de nombreuses dépendances de cette classe DIV externe, donc le faire fonctionner me ferait économiser beaucoup de code.