"Untitled"
Bootstrap 4.1.1 Snippet by banwarilalpurvya

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(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());
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro Angular

Questions / Comments: