jQuery DataTables – Column width issues with Bootstrap tabs (Scroller extension – Incorrect column widths or missing data)

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

by tuancongtuyn

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11,sc-1.4.1/datatables.min.css">
<script src="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11,sc-1.4.1/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>Scroller extension - Incorrect column widths or missing data</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="#example3-tab1" aria-controls="example3-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#example3-tab2" aria-controls="example3-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="example3-tab1">
            <table id="example3-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(){
   $('#example3-tab1-dt').DataTable({
      scroller: true,
      scrollY: 200
   });

   $('#example3-tab2-dt').DataTable({
      scroller: true,
      scrollY: 200
   });
   
   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      
   });   
});