Starting hidden (based on parent element) messes up stying of child with Bootstrap 4

Question

I want to add a class to a parent DIV that affects lots of inner elements. But when I do this with Bootstrap, the styling gets messed up.

This code shows the problem on <th>2</th> where you can see the bottom border is misaligned. If I just do a .toggle(".second") on the element instead, it will work.

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>

In my project I would like to have many dependencies of that outer DIV class, so getting it to work would save me lots of code.

Answer 1

use display: table-cell instead of block.

.show-inner .second {
    display: table-cell;
}