Попытка создать таблицу аккордеона с помощью Bootstrap, но ячейки повреждены при нажатии

Question

Я пытаюсь создать таблицу, которая отображает и скрывает дополнительные строки информации, стиль аккордеона. Он работает по большей части, но, к сожалению, компоновка ячеек все прикручивается всякий раз, когда вы показываете строку.

jsfiddle

Как вы можете видеть, когда вы нажимаете на строку, все новые клетки становятся сжаты влево вместо вытянув через ряд как обычно. Я пытался отладить в Chrome, но я не могу понять, почему он это делает.

<fieldset> 
    <div class="table-scrollable"> 
     <table id="tbl-sample-values" class="table table-condensed table-bordered table-hover" style="font-size:85%;"> 
      <thead> 
       <tr style="color: red;"> 
        <th>Step #</th> 
        <th>Processing Step</th> 
        <th>Barcode</th> 
       </tr> 
      </thead> 

      <tbody> 

       <tr data-toggle="collapse" data-target="#accordion" class="clickable"> 
        <td>9</td> 
        <td colspan="2">Parts Inspection</td> 
       </tr> 

       <tr id="accordion" class="collapse"> 
        <td>9.1</td> 
        <td>Handle silicon electrodes...</td> 
        <td>[Barcode here]</td> 
       </tr> 

       <tr data-toggle="collapse" data-target="#accordion2" class="clickable"> 
        <td>10</td> 
        <td colspan="2">IPA Clean</td> 
       </tr> 

       <tr id="accordion2" class="collapse"> 
        <td>10.1</td> 
        <td>Place part with frontside facing up...</td> 
        <td>[Barcode here]</td> 
       </tr> 

      </tbody> 
     </table> 
    </div> 
</fieldset> 

Answer 1

Его из-за бутстрапа CSS. Когда вы расширяете ряд его получить .in класс и этот стиль:

.collapse.in { 
    display: block; 
} 

Вы должны добавить пользовательские CSS:

tr.collapse.in { 
    display: table-row; 
} 

или обновить версию начальной загрузки - более поздние версии уже включают в себя это.

jsfiddle