Table-fixed-header-bootstrap

FIxed Table Header for Bootstrap based HTML Tables with Large Data on Page scroll

View the Project on GitHub psbs/table-fixed-header-bootstrap

table-fixed-header-bootstrap

Shows HTML Table Header fixed on top on page scroll and works perfectly with html tables containing large data.

Include the table-fixed-header.js and table-fixed-header.css.

And add class='psb-fixed-table' to table tag as shown below:

SAMPLE PAGE HTML:

<html>
<head>
  <link rel="stylesheet" href="bootstrap.min.css"> 
   <!-- works only with bootstrap -->
  <link rel="stylesheet" href="table-fixed-header.css"> 
   <!-- must include -->
</head>
<body>
  <div class='container'>
    <div class='row'>
      <table class='table table-bordered psb-fixed-table'>
       <!-- must include psb-fixed-table class -->
        <thead><!-- element must be available -->
          <th></th> <!-- element must be available -->
        </thead>
        <tbody>
        </tbody>
      </table>  
    </div>
  </div>
  <script src="jquery.min.js"></script> 
   <!-- must include jquery -->
  <script src="table-fixed-header.js"></script>
   <!-- must include -->
</body>  
</html>

Limitations in current Version