Interesting bug with bootstrap 3 collapsed panel

sweetmelon

I found a problem when putting a Jquery Datatable (with its own responsive plugin) in a bootstrap 3 collapsed panel.

Here is the example that works: http://jsfiddle.net/Wc4xt/1804/

Here is the example that does NOT work: http://jsfiddle.net/Wc4xt/1803/

The problem I found is that,

if the panel that wraps the table is collapsed at the beginning, i.e. setting the wrapper div like this: < div id="collapseOne" class="panel-collapse collapse" >, the table's columns will not collapse when I resize the browser.

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. < div id="collapseOne" class="panel-collapse" >, or add "in" into its class, i.e. < div id="collapseOne" class="panel-collapse collapse in" >, then the table works fine. The columns are able to collapse when window resizes.

However, I want the collapsed panel stay closed by default. So I have to add "collapse" to the class without class "in".

I also check the bootstrap source code,

  .collapse {
     display: none;
  }

  .collapse.in {
     display: block;
  }

I have spent days in this and still cannot see why the class "collapse" will cause this problem.

Thank you all in advance.