jQuery DataTables – Column width issues with Bootstrap tabs (Responsive extension - Incorrect breakpoints)

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,r-2.0.2/datatables.min.css">
<script src="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11,r-2.0.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>Responsive extension - Incorrect breakpoints</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="#example2-tab1" aria-controls="example2-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#example2-tab2" aria-controls="example2-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="example2-tab1">
            <table id="example2-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>
                        <th>Phone</th>
                        <th>Extension</th>
                        <th>Department</th>
                        <th>Supervisor</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</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(){
   $('#example2-tab1-dt').DataTable({
      responsive: true
   });

   $('#example2-tab2-dt').DataTable({
      responsive: true
   });
   
   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust()
         .responsive.recalc();
   });   
   
});