<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="JStableOuter" >
<table>
<thead>
<tr style="top: 0px" >
<th class="lightBlueBox" >P/L</th>
<th class="lightBlueBox" > <p>Dec 16</p> <span class="profitCol" >$500</span> </th>
<th class="lightBlueBox" > <p>Dec 17</p> <span class="profitCol" >$68,128</span> </th>
<th class="lightBlueBox" > <p>Dec 17</p> <span class="profitCol" >$68,638</span> </th>
<th class="lightBlueBox" > <p>Dec 17</p><span class="negativeCost" > -$79,052 </span> </th>
<th class="lightBlueBox" > <p>Dec 17</p> <span class="profitCol" >$68,638</span> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="colorOrange" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="colorOrange" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
<tr>
<td class="lightBlueBox" ><p class="revenueCol" >REV</p><p>COST</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="colorOrange" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
<td class="lightBlueBox" ><p class="revenueCol" >$2,000</p><p>-1,500</p></td>
</tr>
</tbody>
</table>
</div>
</body>
body { padding: 0px; margin: 0px }
.JStableOuter table {
position: relative;
width: 100%;
background-color: #fff;
border-collapse: collapse;
font-family: arial;
display: block;
height: 450px;
overflow: scroll;
}
.JStableOuter { max-width:100%; margin:auto; border:1px solid #999; }
/*thead*/
.JStableOuter thead {
position: relative;
/*display: block;*/ /*seperates the header from the body allowing it to be positioned*/
overflow: visible;
}
.JStableOuter thead th {
background-color: #fff;
/* min-width: 120px;*/
height: 32px;
padding: 3px 15px 0;
font-size: 13px;
vertical-align: top;
position: relative;
box-shadow: 0 1px 0px 1px #999;
}
.JStableOuter thead th p { margin: 5px 0; font-weight: normal; }
.JStableOuter thead th:nth-child(1) {/*first cell in the header*/
position: relative;
/* display: block;*/ /*seperates the first cell in the header from the header*/
background-color: #fff;
z-index: 99;
border-right: 1px solid #999;
box-shadow: 0 1px 1px 1px #999;
min-width: 120px;
}
.JStableOuter thead tr {/*first cell in the header*/
position: relative;
}
.JStableOuter tbody { /*border-top: 1px solid #999;*/}
.JStableOuter tbody td {
background-color: #fff;
/*min-width: 120px;*/
border: 1px solid #999;
padding: 0 15px;
min-width: 100px;
font-size: 13px;
box-shadow: 0 1px 0px 1px #999;
}
.JStableOuter tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
/*display: block;*/ /*seperates the first column from the tbody*/
height: 40px;
background-color: #fff;
box-shadow: 0 0px 1px 1px #999;
}
.tableOuter {
max-width: 800px;
overflow: auto;
}
.negativeCost { color: #f10; }
.profitCol { color: #81a65c; }
.revenueCol { color: #5484bf; }
.JStableOuter thead th.blueHead { background-color: #7b7b7b; color: #fff; }
.JStableOuter thead th.lightBlueBox, .JStableOuter tbody td.lightBlueBox { background: #efefef; border-color: #999; }
.JStableOuter p { margin: 5px 0; }
.btnRed { background: #b51a01; color: #fff; border-radius: 50px; padding: 5px 15px; }
.colorOrange { color: #f6984a; }
.contBox { min-width: 150px; }
$(document).ready(function() {
$('.JStableOuter table').scroll(function(e) {
$('.JStableOuter thead').css("left", -$(".JStableOuter tbody").scrollLeft());
$('.JStableOuter thead th:nth-child(1)').css("left", $(".JStableOuter table").scrollLeft() -0 );
$('.JStableOuter tbody td:nth-child(1)').css("left", $(".JStableOuter table").scrollLeft());
$('.JStableOuter thead').css("top", -$(".JStableOuter tbody").scrollTop());
$('.JStableOuter thead tr th').css("top", $(".JStableOuter table").scrollTop());
});
});
