DataTables + Bootstrap + FixedHeader

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h1>Datatables + Fixed Header + Bootstrap tabs</h1>
<p style="color: green">Multiple datatables (with diferent number os columns) in <b>same tab/page</b> work fine</p>
<p style="color: red">Multiple datatables (with diferent number os columns) in different Boostrap tabs has issues</p>

<ul>
  <li style="color: red">Table 3 gets the fixed header of Table 1</li>
  <li style="color: red">Table 4 gets the fixed header of Table 2</li>
</ul>

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#tab0">Tab 0</a></li>
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>

<div class="tab-content">
<div id="tab0" class="tab-pane fade in">
<p style="height:500px;">
Empty tab
</p>
</div>
  <div id="tab1" class="tab-pane fade in active">
    <h1>Table 1</h1>
    <table id="example1" class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>

     ...

CSS

body {
  padding: 1em;
}

JavaScript

$(document).ready(function() {
  var table1 = $('#example1').DataTable();
  var fh1 = new $.fn.dataTable.FixedHeader(table1, {
    alwaysCloneTop: true
  });

  var table2 = $('#example2').DataTable();
  var fh2 = new $.fn.dataTable.FixedHeader(table2, {
    alwaysCloneTop: true
  });

  var table3 = $('#example3').DataTable();
  var fh3 = new $.fn.dataTable.FixedHeader(table3, {
    alwaysCloneTop: true
  });

  var table4 = $('#example4').DataTable();
  var fh4 = new $.fn.dataTable.FixedHeader(table4, {
    alwaysCloneTop: true
  });
  
  $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {    
  	table1.fixedHeader.disable();
    table2.fixedHeader.disable();
    table3.fixedHeader.disable();
    table4.fixedHeader.disable();
    
  if (e.target.hash == '#tab1'){
  	table1.fixedHeader.enable().fixedHeader.adjust();
    table2.fixedHeader.enable().fixedHeader.adjust();  
  }
  else if (e.target.hash == '#tab2'){  	  
  	table3.fixedHeader.enable().fixedHeader.adjust();
    table4.fixedHeader.enable().fixedHeader.adjust();
  }
         //$($.fn.dataTable.tables(true)).DataTable().fixedHeader.adjust();
   });
});