在单元格上添加子表时调整html表列的大小

Question

我有一个带有一些数据的html和一个带有列数的colspan的行，以获得表的整个宽度。此colspan行可以像树表一样出现或消失。我正在使用jquery和内部div来做它。

<table id="mainTable" style="width:100%">
  <thead> 6 headers... </thead>
  <tbody>
    <tr>
             6 columns with some data...
    </tr>
    <tr>
      <td colspan="6">
      <div id="toShow" style="display:none;">
      <table>
        <tr>
          <td>small text></td>
          <!-- long text seems to be more inclined to provoke this behavior -->
          <td>looooonnng text</td>
        </tr>   
     </table>
     </div>
     </tr>
  </tbody>
</table>

 $('#mainTable').on("click", function(){
    $('#toShow').toggle();
 });

所以只要行不包含表格，这项工作就会很好。 否则，当行出现/消失时，父表的列会调整大小 Firefox似乎没有受到这种行为的影响，一切运行良好 我完全无法弄清楚为什么，但就像我在评论中所说的那样，长文本似乎更倾向于引发这种行为，它必须在浏览器上触发一些重绘/重建。

这是一个小提琴： http://jsfiddle.net/w6SME/

同样table-layout: fixed可以解决问题，但我不想使用它，我希望列的宽度根据其内容进行调整。