Fixed Header With Perfect ScrollBar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/js/min/perfect-scrollbar.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/css/perfect-scrollbar.css">
<div id="super_container">
<table id="freezeMe" style="border-collapse: collapse; border = 1px;">
    <thead>
        <tr>
            <th class="header-cell col1">One</th>
            <th class="header-cell col2">Two</th>
            <th class="header-cell col3">Three</th>
            <th class="header-cell col4">Four</th>
            <th class="header-cell col5">Five</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="body-cell col1">body row1</td>
            <td class="body-cell col2">body row2</td>
            <td class="body-cell col3">body row2</td>
            <td class="body-cell col4">body row2</td>
            <td class="body-cell col5">body row2 en nog meer</td>
        </tr>
        <tr>
            <td class="body-cell col1">body row1</td>
            <td class="body-cell col2">body row2</td>
            <td class="body-cell col3">body row2</td>
            <td class="body-cell col4">body row2</td>
            <td class="body-cell col5">body row2 en nog meer</td>
        </tr>
        <tr>
            <td class="body-cell col1">body row1</td>
            <td class="body-cell col2">body row2</td>
            <td class="body-cell col3">body row2</td>
            <td class="body-cell col4">body row2</td>
            <td class="body-cell col5">body row2 en nog meer</td>
        </tr>
        <tr>
            <td class="body-cell col1">body row1</td>
            <td class="body-cell col2">body row2</td>
            <td class="body-cell col3">body row2</td>
            <td class="body-cell col4">body row2</td>
            <td class="body-cell col5">body row2 en nog meer</td>
        </tr>
        <tr>
            <td class="body-cell col1">body row1</td>
            <td...

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    border: 2;
}
.super_container {
  background-color: blue;
  //height: 500px;
  //width: 500px;
  //z-index: 999;
}
table {
    background-color:#000000;
    border-collapse:separate;
    border-spacing:1px;    
}
.outer-container {
    position: relative;
    width: 50%;
    height: 300px;
    border-collapse: collapse;
    border: 2;
}
.inner-container {
    height: 90%;
    overflow: hidden;
    border-collapse: collapse;
    border: 2;
}
.table-header {
    position: relative;
    background-color:#000000;
    border-collapse:separate;
    border-spacing:1px;
}
.table-body {
    position: relative;
    background-color:#FFFFFF;
    border-collapse:separate;
    border-spacing:1px;
}
.header-cell {
    background-color: #eee;
    text-align: left;
    height: 40px;
}
.body-cell {
    text-align: left;
}
.col1, .col3, .col4, .col5 {
    width:120px;
    min-width: 120px;
}
.col2 {
    min-width: 300px;
}

JavaScript

(function ($) {

    $.fn.freezeHeader = function (options) {
        //var defaults = {};
        //var settings = $.extend({}, defaults, options);

        return this.each(function () {           

            var $oldTable = $(this);
            //var tableHeight = $oldTable.outerHeight();

            var $outer_container = $("<div class=\"outer-container\"></div>");
            var $inner_container = $("<div class=\"inner-container\"></div>");

            var $new_table_header = $("<div class=\"table-header\"></div>");
            var $new_table_body = $("<div class=\"table-body\"></div>");

            var $clonedHeader = $oldTable.find('thead:first').clone();
            var $clonedBody = $oldTable.find('tbody:first').clone();

            var $newHeaderTable = $('<table>');
            var $newBodyTable = $('<table>');


            //$newHeaderTable.remove('thead').remove('tbody').append($clonedHeader);
            //$newBodyTable.remove('thead').remove('tbody').append($clonedBody);

            $new_table_header.append($clonedHeader);
            $new_table_body.append($clonedBody);

            $inner_container.append($new_table_header).append($new_table_body);

            $outer_container.append($inner_container);

            $oldTable.remove();


            function setTableBody() {
                console.log($outer_container, $new_table_body, $new_table_header);
                $outer_container.find($new_table_body).height($outer_container.find($inner_container).height() - $outer_container.find($new_table_header).height());
            }

            $outer_container.find($new_table_body).scroll(function () {
                $outer_container.find($new_table_header).offset({
                    left: -1 * this.scrollLeft
                });
            });
            $outer_container.appendTo('body');
            $outer_container.find($new_table_body).perfectScrollbar();
            
            setTableBody();
           ...