How to add a bootstrap table with fixed header and scrollable body

I am pretty sure that everyone is familiar with bootstrap CSS, if not please take a look(bootstrap).
Now Bootstrap has lots of different components and table styling is one of them and they have plenty of different styling options.

Now sometimes if we have to display a large amount of data inside a table, the user will have to scroll till the end of the table and after few scroll, they can not see the table header. There is a way to fix this. Please follow the below steps.

Step1: Create a bootstrap table first

<table class="table table-fixed">
  <colgroup></colgroup>
  <colgroup class=""></colgroup>
  <thead>
  <tr>
    <th>
      <label>
        ##
      </label>
    </th>
    <th>
      <label class="">
        ###
      </label>
    </th>
  </tr>
  </thead>
  <tbody id="fixed-height">
      <tr>
        <td>
          ###
        </td>
        <td>
          ###
        </td>
      </tr>
  </tbody>
</table>

Step2: Add the custom CSS for the table

.table-fixed{
  tbody {
    display: block;
    overflow: auto;
  }
  thead, tbody tr {
    display: table;
    width: 100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
  }
  thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
  }
  table {
    width: 100%;
  }
}

Step3: Now we need to add some simple js for your application

var ResizeTableWindow = (function() {
    var _resizeTable, _heights;

    _resizeTable = function()
    {
        _heights = window.innerHeight;
        $("#fixed-height").height(_heights - 350);
    };

    return{
        resizeTable: function() {
            _resizeTable();
        }
    };
})();

ResizeTableWindow.resizeTable();


And that's it, now you have a CSS table with the scroable body and fixed header.
Few key points to remember here First please check the table name and the
CSS class name, it should always be the same
and the resize height please adjust it with you screen size for me it 350