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

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

by gyrocode

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11/datatables.min.css">
<script src="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11/datatables.min.js"></script>
<div class="container">
    <h3>
    <a href="https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/">jQuery DataTables – Column width issues with Bootstrap tabs</a> 
    <small>Incorrect column widths</small>
    </h3>
    <a href="https://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="#example1-tab1" aria-controls="example1-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#example1-tab2" aria-controls="example1-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="example1-tab1">
            <table id="example1-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>
                        <td>Garrett Winters</td>
                      ...

CSS

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

JavaScript

$(document).ready(function(){
   $('#example1-tab1-dt').DataTable({
      columns: [
         { width: '20%' },
         { width: '20%' },
         { width: '20%' },
         { width: '10%' },
         { width: '15%' },
         { width: '15%' }
      ]
   });

   $('#example1-tab2-dt').DataTable({
      columns: [
         { width: '20%' },
         { width: '20%' },
         { width: '20%' },
         { width: '10%' },
         { width: '15%' },
         { width: '15%' }
      ]
   });
   
   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust();
   });   
});