Complex Scrolling Table

by Ju Oliveira

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/4.1.1/what-input.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="outer-div">
    <div id="demo" class="fixedTable">
        <header class="fixedTable-1header">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>User</th>
                    </tr>
                </thead>
            </table>
        </header>

        <header class="fixedTable-header">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="text-center">2000</th>
                        <th class="text-center">2001</th>
                        <th class="text-center">2002</th>
                        <th class="text-center">2003</th>
                        <th class="text-center">2004</th>
                        <th class="text-center">2005</th>
                        <th class="text-center">2006</th>
                        <th class="text-center">2007</th>
                        <th class="text-center">2008</th>
                        <th class="text-center">2009</th>
                        <th class="text-center">2010</th>
                        <th class="text-center">2011</th>
                        <th class="text-center">2012</th>
                        <th class="text-center">2013</th>
                       ...

CSS

body {
  height: 100%;
  width: 100%;
}

.outer-div {
    height: 90%;
    width: 100%;
}

.fixedTable {
    width: 100%;
    height: 100%;
}

.fixedTable .table {
    width: 100%;
}

.fixedTable .table tr td,
.fixedTable .table tr th {
    min-width: 100px;
    width: 100px;
    min-height: 48px;
    height: 48px;
    padding: 5px;
}

.fixedTable-1header {
    width: 29.5%;
    height: 6.4%;
    position: absolute;
    overflow: hidden;
}

.fixedTable-header {
    width: 62%;
    height: 7%;
    margin-left: 29.5%;
    overflow: hidden;
}

.fixedTable-3header {
    width: 8.5%;
    height: 6.4%;
    margin-left: 91.5%;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.fixedTable-sidebar {
    width: 29.5%;
    height: 90%;
    float: left;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none; /* hide scrollbar for IE */
}
.fixedTable-sidebar::-webkit-scrollbar {
    display: none; /* hide scrollbar for Webkit Browsers */
}

.fixedTable-body {
    overflow-y: hidden;
    overflow: scroll;
    width: 62%;
    height: 93%;
    float: left;
}
.fixedTable-sidebar::-webkit-scrollbar:vertical {
    display: none; /* NOT WORKING */
}

.fixedTable-sidebar-two {
    width: 8.5%;
    height: 90%;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
}

JavaScript

function fixedTable(el) {
    // Scroll listener
    sidebarOne = $(el).find('.fixedTable-sidebar');
    body = $(el).find('.fixedTable-body');
    sidebarTwo = $(el).find('.fixedTable-sidebar-two');

    // Scroll aplly
    header = $(el).find('.fixedTable-header table');
    sidebar = $(el).find('.fixedTable-sidebar table');
    bodyScroll = $(el).find('.fixedTable-body table');
    sidebarT = $(el).find('.fixedTable-sidebar-two table');

    // Horizontal scroll
    $(body).scroll(function() {
      	$(header).css('margin-left', -$(body).scrollLeft());
    });

    // Vertical scroll
    $(sidebarOne).scroll(function() {
        $(bodyScroll).css('margin-top', -$(sidebarOne).scrollTop());
        $(sidebarT).css('margin-top', -$(sidebarOne).scrollTop());
    });
    $(body).scroll(function() {
        $(sidebar).css('margin-top', -$(body).scrollTop());
        $(sidebarT).css('margin-top', -$(body).scrollTop());
    });
    $(sidebarTwo).scroll(function() {
        $(sidebar).css('margin-top', -$(sidebarTwo).scrollTop());
        $(bodyScroll).css('margin-top', -$(sidebarTwo).scrollTop());
    });
};

$(function(){
	demo = fixedTable($('#demo'));
});