使用bootstrap框架中data-toggle="tab"，dataTable出现表头与数据不对齐

代码如下：

<li id="usedTabLi" class="active"><a href="#usedTab" data-toggle="tab">已使用</a></li>
<li id="unUsedTabLi"><a href="#unUsedTab" data-toggle="tab">未使用</a></li>
<div class="tab-content">
  <div class="tab-pane active" id="usedTab">
    <table class="table table-striped table-bordered table-hover" id="usedTable" style="white-space: nowrap;">
    </table>
  </div>
  <div class="tab-pane" id="unUsedTab">
    <table class="table table-striped table-bordered table-hover" id="unUsedTable" style="white-space: nowrap;">
    </table>
  </div>
</div>

可以观察以下两张图片，发现“未使用”出现表头与数据不对齐的情况，原因不明。然后发现当数据加载时，哪个标签是第一个显示出来的，哪个就没问题。例如进入该界面，本来是“已使用”第一个显示的，但我迅速点进去“未使用”，等数据都加载好了，“未使用”就显示正常，但“已使用”就会出现表头与数据不对齐。而点击某些地方，例如“下一页”等，会自动对齐。（小白不懂，但敢问，知道原因的可以评论下，谢谢）

20191014142316.png

20191014142451.png

因为点击某些地方，例如“下一页”等，会自动对齐，小白就在想，能不能当我点击“未使用”的<li>标签时，刷新一下页面。
所以找了下度娘，有人建议如下代码

table.ajax.reload( null, false );

但报错了，“# [Uncaught TypeError: Cannot read property 'reload' of undefined]”
找到个解释该报错原因的解答，如下图

20191014155614.png

我就搜dataTable下有没有自己的刷新方法，发现可以用table.fnDraw(false);

table.fnDraw(false);
//dataTable的重绘方法。
//true：重置表格的初始状态，回到第一页，
//false：只是重新加载当前页，且保持当前页码不变。

但没啥变化，还是表头与数据不对齐。开始怀疑方法不对，但其实是可行的。

没办法，用个愚蠢的方法，延时，最终代码如下

$('#unUsedTabLi').click(function(e) {
  setTimeout(function (){
    unUsedTable.fnDraw(false);
  }, 500);
}

(有啥其他办法都可以评论下，大家研究研究)