jQuery DataTables: Column width issues with Bootstrap tabs (FixedColumns extension – Incorrect column widths)

Example for article at https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/

by gyrocode

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/fc-3.2.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/fc-3.2.2/datatables.min.js"></script>
<div class="container">
    <h3>
    <a href="http://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/">jQuery DataTables – Column width issues with Bootstrap tabs</a> 
    <small>FixedColumns extension - Incorrect column widths</small>
    </h3>
    <a href="http://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/">See full article on Gyrocode.com</a>
    <hr><br>
   
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#example4-tab1" aria-controls="example4-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#example4-tab2" aria-controls="example4-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="example4-tab1">
            <table id="example4-tab1-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                       ...

CSS

.tab-content {
  padding:10px;
  border-left:1px solid #DDD;
  border-bottom:1px solid #DDD;
  border-right:1px solid #DDD;
}

JavaScript

$(document).ready(function(){
   $('#example4-tab1-dt, #example4-tab2-dt').DataTable({
      scrollX: true,
      fixedColumns: {
         leftColumns: 1
      }
   });
   
   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust()
         .fixedColumns().relayout();
   });   
});