title: Bootstrap table how hidden, when toggled visible using javascript it does not show correctly
body: <p>I have a bootstrap table. I am using css to hide one of the table rows initially. I have a checkbox that I want to show the hidden table row if it is selected, otherwise it should not show the row. I have it working, but when the checkbox is selected, the format (width) of the now visible row is out of whack (not aligned). I tried playing with the css for this hidden row (width, display inline-table...) but I cannot get it to work.</p>
  
  <p>CSS:</p>
  
  <pre><code> #hiddenRow {
         display: none;
      }
      .orderTotal {
         padding: 10px;
         background-color: #fdfbe4;
         width: 95%;
         margin: 0 auto;  
      }
      .orderTotal h4 {
         font-weight: bold;   
      }
      .totalOrder {
         color: #ee7a23;
         font-weight: bold;
         font-size: 18px; 
      }
      .totalAmount {
         font-weight: bold;
         font-size: 18px; 
      }
  </code></pre>
  
  <p>Table html:</p>
  
  <pre><code>&lt;div class="orderTotal"&gt;
     &lt;h4&gt;Order Total:&lt;/h4
  
     &lt;table id="tableOrderTotal" class="table tableTotal"&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
           &lt;td&gt;Item1&lt;/td&gt;
           &lt;td class="price-1"&gt;50&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr id="hiddenRow"&gt;
           &lt;td&gt;Item2&lt;/td&gt;
           &lt;td class="price-2"&gt;13&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td&gt;Item3&lt;/td&gt;
          &lt;td class="price-3"&gt;30&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr class="summary"&gt;
          &lt;td class="totalOrder"&gt;Total:&lt;/td&gt;
          &lt;td id="result" class="totalAmount"&gt;&lt;/td&gt;
         &lt;/tr&gt;
  
       &lt;/tbody&gt;
     &lt;/table&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>JS to show hidden table row:</p>
  
  <pre><code>// hide table row from order total if not checked
  $("input[name='product_CD']").on("click", function() {
      $("#hiddenRow").toggleClass('show');
  });
  </code></pre>
  
  <p>Here is a screenshot of how the row displays when the checkbox is selected. </p>
  
  <p>Notice how the width of the row and the price column is not aligned. It previews fine if the row is not initially hidden and it also toggles visible/hidden fine in a browser when inspecting the element and manually toggling the <code>#hiddenRow</code> <code>display:none</code> css on and off. </p>
  
  <p><a href="https://i.stack.imgur.com/2L2ON.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/2L2ON.jpg" alt="enter image description here"></a></p>