"Untitled"
Bootstrap 4.1.1 Snippet by banwarilalpurvya

<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()); }); });

Related: See More


Questions / Comments: