title: Jquery Datatable responsive plugin inside bootstrap 3 collapsed panel
body: <p>I found a problem when putting a Jquery Datatable (with its own responsive plugin) in a bootstrap 3 collapsed panel.</p>
  
  <p>Here is the example that works:
  <a href="http://jsfiddle.net/Wc4xt/1804/" rel="nofollow">http://jsfiddle.net/Wc4xt/1804/</a></p>
  
  <p>Here is the example that does NOT work:
  <a href="http://jsfiddle.net/Wc4xt/1803/" rel="nofollow">http://jsfiddle.net/Wc4xt/1803/</a></p>
  
  <p>The problem I found is that, </p>
  
  <ul>
  <li><p>if the panel that wraps the table is collapsed at the beginning, i.e.
  setting the wrapper div like this: 
  <code>&lt;div id="collapseOne" class="panel-collapse collapse"&gt;</code>, the table's columns will not
  collapse when I resize the browser.</p></li>
  <li><p>if the panel that wraps the table is collapsed at the beginning, i.e. if I either remove "collapse" away from the class, i.e. <code>&lt;div id="collapseOne" class="panel-collapse"&gt;</code>, or add "in" into its class,
  i.e.  <code>&lt;div id="collapseOne" class="panel-collapse collapse in"&gt;</code>, then the
  table works fine. The columns are able to collapse when window
  resizes.</p></li>
  </ul>
  
  <p><strong>However, I want the collapsed panel stay closed by default. So I have to add "collapse" to the class without class "in".</strong></p>
  
  <p>I also check the bootstrap source code, </p>
  
  <pre><code>.collapse {
    display: none;
  }
  .collapse.in {
    display: block;
  }
  </code></pre>
  
  <p>I have spent days in this and still cannot see why the class "collapse" will cause this problem.</p>
  
  <p>Thank you all in advance.</p>