Разверните div, не влияя на навигацию

Question

У меня есть навигационная панель, div для свертывания и таблица в div. Я хочу нажать на tr, и появится div разворота. Однако, хотя я увеличил div, структура страницы также нарушена: когда div появляется, таблица и панель навигации будут сужаться. Я просто хочу, чтобы только div, у которого есть таблица, сузился. Как я могу решить это?

Структура, которую я построил в html-файле:

<nav></nav>
<div class="row>
   <div class="col-9">
       <table>
           <thead>
               <tr>
                  <th></th>
                  <th></th>
               </tr>
           </thead>
           <tbody>
               <tr data-toggle="collapse" data-target="#demo">
                  <td></td>
                  <td></td> 
               </tr>
           </tbody>
       </table>
   </div>
   <div class="col-3 collapse">
        <div class="container"></div>
   </div>
</div>

У меня есть загрузка int fiddle: https://jsfiddle.net/3b612srg/

Answer 1

Так что я нашел на каждом сайте, но ничего полезного. И тогда я обнаружил, что могу написать машинопись или javascript, чтобы класс «коллапс» исчез. Может быть, так будет проще