Bootstrap Snippet table header fixed using HTML CSS jQuery

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.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 style="left: 0px" ></th>
        <th>COST </th>
        <th class="profitCol" >PROFIT </th>
        <th class="revenueCol" >REVENUE </th>
        <th>START DATE</th>
        <th>COMPLETION DATE</th>
        <th>ISSUE </th>
        <th>LOST </th>
        <th>APPROVED </th>
        <th>INVOICE AMOUNT </th>
        <th class="contBox" >COMMENTS</th>
        <th class="blueHead" >RUNNING BALANCE</th>
        <th class="blueHead" > $500 </th>
        <th class="blueHead" > $68,128 </th>
        <th class="blueHead" > $68,638 </th>
        <th class="blueHead" > <span class="negativeCost btnRed" > -$79,052 </span> </th>
        <th class="blueHead" > $68,638 </th>
      </tr>
      <tr style="top: 0px" >
        <th style="left: 0px" ></th>
        <th> <p> $16,417,480 </p> </th>
        <th class="profitCol" > <p> $2,412,287 </p> </th>
        <th class="revenueCol" > <p> $18,829,767 </p> </th>
        <th></th>
        <th></th>
        <th> <p> $748,371 </p> </th>
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:1170px; 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

"table header fixed"
Bootstrap 4.0.0 Snippet by banwarilalpurvya

Related: See More

Questions / Comments:

"table header fixed" Bootstrap 4.0.0 Snippet by banwarilalpurvya

Related: See More

Questions / Comments:

"table header fixed"
Bootstrap 4.0.0 Snippet by banwarilalpurvya