Datatable with fixed header

Test for datatable with fixed header in scrolling-container

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.rawgit.com/ecomfe/echarts/master/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.jqueryui.min.css">
<body>
<div id="pageHeader">
  <div style='display:inline-block;float:left;margin-left:20px;margin-top:5px;'>
  	<img src='https://datatables.net/media/images/logo-fade.png	'>
  </div>
  <div style='display:inline-block;vertical-align:top;margin-left:20px;'><h2>Header</h2></div>
  <div style='clear:both;float:none;display:block;position:relative;'></div>
</div>
<div id="wrap">
	<div id="contentLeft">
		<p>Navigation</p>
		<p>test test test test test test test test test test test </p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
	</div>
	<div id="contentMain">
    <div id="mainBar" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
    <div id="datTabl" style="height:500px;border:1px solid #ccc;padding:10px;">

      <table width="100%" class="display" id="dTable1" cellspacing="0">
        <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...

CSS

* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{
	height:100%;
}
html>body{
	position:absolute;
	width:100%;
	left:0%;
	margin-left:0px;
}
#pageHeader {
	background:Gainsboro;
	position: fixed;
	left: 0; right: 0;top:0;
	height: 100px;
	z-index:11;
}
#pageFooter {
	background:Gainsboro;
	position: fixed;
	left: 0; right: 0;bottom:0;
	height: 24px;
}
#contentLeft{
	background:lightgrey;
	position: fixed;
	top: 100px; bottom: 24px; left: 0;
	width: 10%;
 	margin-top:2px;
	margin-bottom:2px;
}
#contentRight{
	background:Gainsboro;
	position: fixed;
	top: 100px; bottom: 24px; right: 0;
	width: 0%;
	margin-top:2px;
	margin-bottom:2px;
}
#contentMain{
	background:white;
	overflow:auto;
	position:relative;
	left:10%;
	width:89.9%;
	top:100px;
	bottom:24px;
	margin-top:2px;
	margin-bottom:2px;
	margin-left:2px;
	margin-right:2px;
}
#pageHeader {
	background:Gainsboro;
	position: fixed;
	left: 0; right: 0;top:0;
	height: 100px;
	z-index:11;
}
#pageFooter {
	background:Gainsboro;
	position: fixed;
	left: 0; right: 0;bottom:0;
	height: 24px;
}
#contentLeft{
	background:lightgrey;
	position: fixed;
	top: 100px; bottom: 24px; left: 0;
	width: 10%;
 	margin-top:2px;
	margin-bottom:2px;
}
#contentRight{
	background:Gainsboro;
	position: fixed;
	top: 100px; bottom: 24px; right: 0;
	width: 0%;
	margin-top:2px;
	margin-bottom:2px;
}
#contentMain{
	background:white;
	overflow:auto;
	position:relative;
	left:10%;
	width:89.9%;
	top:100px;
	bottom:24px;
	margin-top:2px;
	margin-bottom:2px;
	margin-left:2px;
	margin-right:2px;
}

JavaScript

$(document).ready(function() {    
  
            $('#dTable1').DataTable( {
             fixedHeader: {
             	 header: true,
               headerOffset: $('#pageHeader').outerHeight()
             }          
            } );
  
            var myChart = echarts.init(document.getElementById('mainBar'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['eins','zwei']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [           {
                        type : 'category',
                        data : ['1','2','3','4','5','6','7','8','9','10','11','12']
                    }                ],
                yAxis : [                    {
                        type : 'value',
                        splitArea : {show : true}
                    }                ],
                series : [                    {
                        name:'eins',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },                    {
                        name:'zwei',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }                ]
            });


           
       });