JSFiddle - React, Tailwind, and code Playground

by Anand Jee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
      <div class="container">
  <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>
            Your Table
          </h4>
        </div>
        <div class="fixed-table">
<div class="table-content">
  <table id="myTable"  class="table table-fixed-header">
          <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Company</th>
                                    <th>Branch</th>
                                    <th>Main Module</th>
                                    <th>Sub Module</th>
                                    <th>Form</th>

                                    <th>Add</th>
                                    <th>Edit</th>
                                    <th>View </th>

                                    <th>Delete</th>
                                    <th>Excel</th>
                                    <th><input type="checkbox" id="chk_UsrRightsActiveStatus" class="i-checks" />&nbsp;&nbsp; Status </th>

                                </tr>

                            </thead>
          <tbody>
              <tr>
                  <td>User 01</td>
                <td>Allenger Medical System ltd.</td>
                <td>Chandigarh</td>
                <td>System Management</td>
                <td>System Maintaence</td>
                <td>Sub Moduel</td>
                <td><input type="checkbox" id="chk_UsrRightsActiveStatus" class="i-checks" /></td>
                <td><input type="checkbox" id="chk_UsrRightsActiveStatus" class="i-checks" /></td>
                <td><input type="checkbox" id="chk_UsrRightsActiveStatus"...

CSS

.fixed-table .header-fixed {
  position: absolute;
  top: 0px;
  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
  border-bottom: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  border-top: 1px solid #d5d5d5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.fixed-table{
  display:block;
  position:relative;
}
.fixed-table th{
  padding: 8px;
  line-height: 18px;
  text-align: left;
}
.fixed-table .table-content{
  display:block;
  position: relative;
  height: 300px; /*FIX THE HEIGHT YOU NEED*/
  overflow-y: auto;
}
.fixed-table .header-copy{
  position:absolute;
  top:0;
  left:0;
}
.fixed-table .header-copy th{
  background-color:#fff;
}

JavaScript

(function($) {

    $.fn.fixedHeader = function() {

        return this.each(function() {
            var o = $(this),
                nhead = o.closest('.fixed-table');

            var $head = $('thead.header', o);

            $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(nhead);
            var ww = [];
            o.find('thead.header > tr:first > th').each(function(i, h) {
                ww.push($(h).width());
            });
            $.each(ww, function(i, w) {
                nhead.find('thead.header > tr > th:eq(' + i + '), thead.header-copy > tr > th:eq(' + i + ')').css({
                    width: w
                });
            });

            nhead.find('thead.header-copy').css({
                margin: '0 auto',
                width: o.width()
            });
/*
  //makes the header scroll horizontally with the table if
  // the table is too wide to fit into the surrounding div
  o.closest('.table-content').scroll(function(){
    var scroll = $(this).scrollLeft();
    nhead.find('thead.header-copy').css('margin-left', -scroll);
  }); */

        });
    };

})(jQuery);


window.onload = function() {
    // add 30 more rows to the table
    var row = $('table#myTable > tbody > tr:first');
    for (i = 0; i < 30; i++) {
        $('table#myTable > tbody').append(row.clone());
    }

    $('.table-fixed-header').fixedHeader();
}