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 zaibtabs

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>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.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 jQuery UI 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>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
            <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>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                        <td>123-456-7890</td>
                        <td>1230</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(){
	$("#tabs").tabs({
	    activate: function (event, ui) {        
          $($.fn.dataTable.tables(true)).DataTable()
            .columns.adjust()
            .responsive.recalc();
    	},
	   create: function (event, ui) {        
          $($.fn.dataTable.tables(true)).DataTable()
            .columns.adjust()
            .responsive.recalc();
    	}
	});   

   $('#example2-tab1-dt').DataTable({
      responsive: true
   });

   $('#example2-tab2-dt').DataTable({
      responsive: true
   });
});