Начало скрытого (на основе родительского элемента) портит отслеживание дочернего элемента с помощью Bootstrap 4

Question

Я хочу добавить класс в родительский DIV, который влияет на множество внутренних элементов. Но когда я делаю это с Bootstrap, стилизация испортилась.

Этот код показывает проблему на 2, где вы видите, что нижняя граница не выровнена. Если я просто сделаю вместо этого элемент .toggle (". Second"), он будет работать.

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>

В моем проекте мне бы хотелось иметь много зависимостейиз этого внешнего класса DIV, так что, приведение его в действие сэкономило бы мне много кода.

Answer 1

использовать отображение: ячейка таблицы вместо блока.

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