DataTables Fixed Header resize problem
HTML
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.0/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.0/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse" id="top-menu" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collapse navigation -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"> <a href="#">HOME</a>
</li>
</ul>
</div>
</div>
<!-- End container-fluid -->
</nav>
<div id="test">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th data-toggle="tooltip" title="Lorem ipsum dolor sit amet">Name</th>
<th data-toggle="tooltip" title="Lorem ipsum dolor sit amet">Position</th>
...
CSS
#test{
margin-top:100px;
}
table{
margin: 0
}
div.FixedHeader_Cloned table { margin: 0 !important }
.navbar {
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
height: 100px;
font-family:'Raleway', sans-serif;
background:#444444;
position: fixed;
}
.navbar-inverse .navbar-nav>.active>a {
background:#000000;
}
.navbar-inverse .navbar-nav > li > a {
color: #F2DEDE;
}
JavaScript
$(document).ready(function() {
var data = [
['Tiger Nixon', 'System Architect', 'Edinburgh', '61', '2011/04/25', '$320,800'],
['Garrett Winters', 'Accountant', 'Tokyo', '63', '2011/07/25', '$170,750'],
['Ashton Cox', 'Junior Technical Author', 'San Francisco', '66', '2009/01/12', '$86,000'],
['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '22', '2012/03/29', '$433,060'],
['Airi Satou', 'Accountant', 'Tokyo', '33', '2008/11/28', '$162,700'],
['Brielle Williamson', 'Integration Specialist', 'New York', '61', '2012/12/02', '$372,000'],
['Herrod Chandler', 'Sales Assistant', 'San Francisco', '59', '2012/08/06', '$137,500'],
['Rhona Davidson', 'Integration Specialist', 'Tokyo', '55', '2010/10/14', '$327,900'],
['Colleen Hurst', 'Javascript Developer', 'San Francisco', '39', '2009/09/15', '$205,500'],
['Sonya Frost', 'Software Engineer', 'Edinburgh', '23', '2008/12/13', '$103,600'],
['Jena Gaines', 'Office Manager', 'London', '30', '2008/12/19', '$90,560'],
['Quinn Flynn', 'Support Lead', 'Edinburgh', '22', '2013/03/03', '$342,000'],
['Charde Marshall', 'Regional Director', 'San Francisco', '36', '2008/10/16', '$470,600'],
['Haley Kennedy', 'Senior Marketing Designer', 'London', '43', '2012/12/18', '$313,500'],
['Tatyana Fitzpatrick', 'Regional Director', 'London', '19', '2010/03/17', '$385,750'],
['Michael Silva', 'Marketing Designer', 'London', '66', '2012/11/27', '$198,500'],
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', '64', '2010/06/09', '$725,000'],
['Gloria Little', 'Systems Administrator', 'New York', '59', '2009/04/10', '$237,500'],
['Bradley Greer', 'Software Engineer', 'London', '41', '2012/10/13', '$132,000'],
['Dai Rios', 'Personnel Lead', 'Edinburgh', '35', '2012/09/26', '$217,500'],
['Jenette Caldwell', 'Development Lead', 'New York', '30', '2011/09/03', '$345,000'],
['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', '40',...