<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
<style type="text/css">
table {
table-layout: fixed;
}
td {
overflow: hidden;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="main wrapper clearfix" style="position : relative; height: 500px; overflow: hidden; white-space: nowrap;">
<div class="Left" style="position: absolute; overflow-x: hidden;width: 186px;">
<table>
<colgroup span="2" style="background-color:green; width: 90px;"></colgroup>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
</table>
<div class="tbLeftWrapper" style="height:200px; overflow-x: hidden; overflow-y:scroll;">
<table class="tbLeft" style="position: relative;">
<colgroup span="2" style="background-color:blue; width: 90px;"></colgroup>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 2,1</td>
</tr>
<tr>
<td>Row 1,2</td>
<td>Row 2,2</td>
</tr>
<tr>
<td>Row 1,3</td>
<td>Row 2,3</td>
</tr>
<tr>
<td>Row 1,4</td>
<td>Row 2,4</td>
</tr>
<tr>
<td>Row 1,5</td>
<td>Row 2,5</td>
</tr>
<tr>
<td>Row 1,6</td>
<td>Row 2,6</td>
</tr>
<tr>
<td>Row 1,7</td>
<td>Row 2,7</td>
</tr>
<tr>
<td>Row 1,8</td>
<td>Row 2,8</td>
</tr>
<tr>
<td>Row 1,9</td>
<td>Row 2,9</td>
</tr>
<tr>
<td>Row 1,10</td>
<td>Row 2,10</td>
</tr>
<tr>
<td>Row 1,11</td>
<td>Row 2,11</td>
</tr>
</tbody>
</table>
</div>
<table>
<colgroup span="2" style="background-color:green; width: 90px;"></colgroup>
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
</tr>
</tfoot>
</table>
</div>
<div class="Middle" style="position: absolute; overflow-y: hidden; overflow-x: scroll;">
<table style="width: 900px;">
<colgroup span="8" style="background-color:orange; width: 90px;"></colgroup>
<thead>
<tr>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
</tr>
</thead>
</table>
<div class="tbMW" style="overflow:hidden; width: 900px">
<div class="tbMiddleWrapper" style="height:200px; overflow-y: scroll; overflow-x: hidden;width: 915px">
<table class="tbMiddle" style="width: 900px;">
<colgroup span="8" style="background-color:red; width: 90px;"></colgroup>
<tbody>
<tr>
<td>Row 3,1</td>
<td>Row 4,1</td>
<td>Row 5,1</td>
<td>Row 6,1</td>
<td>Row 7,1</td>
<td>Row 8,1</td>
<td>Row 9,1</td>
<td>Row 10,1</td>
</tr>
<tr>
<td>Row 3,2</td>
<td>Row 4,2</td>
<td>Row 5,2</td>
<td>Row 6,2</td>
<td>Row 7,2</td>
<td>Row 8,2</td>
<td>Row 9,2</td>
<td>Row 10,2</td>
</tr>
<tr>
<td>Row 3,3</td>
<td>Row 4,3</td>
<td>Row 5,3</td>
<td>Row 6,3</td>
<td>Row 7,3</td>
<td>Row 8,3</td>
<td>Row 9,3</td>
<td>Row 10,3</td>
</tr>
<tr>
<td>Row 3,4</td>
<td>Row 4,4</td>
<td>Row 5,4</td>
<td>Row 6,4</td>
<td>Row 7,4</td>
<td>Row 8,4</td>
<td>Row 9,4</td>
<td>Row 10,4</td>
</tr>
<tr>
<td>Row 3,5</td>
<td>Row 4,5</td>
<td>Row 5,5</td>
<td>Row 6,5</td>
<td>Row 7,5</td>
<td>Row 8,5</td>
<td>Row 9,5</td>
<td>Row 10,5</td>
</tr>
<tr>
<td>Row 3,6</td>
<td>Row 4,6</td>
<td>Row 5,6</td>
<td>Row 6,6</td>
<td>Row 7,6</td>
<td>Row 8,6</td>
<td>Row 9,6</td>
<td>Row 10,6</td>
</tr>
<tr>
<td>Row 3,7</td>
<td>Row 4,7</td>
<td>Row 5,7</td>
<td>Row 6,7</td>
<td>Row 7,7</td>
<td>Row 8,7</td>
<td>Row 9,7</td>
<td>Row 10,7</td>
</tr>
<tr>
<td>Row 3,8</td>
<td>Row 4,8</td>
<td>Row 5,8</td>
<td>Row 6,8</td>
<td>Row 7,8</td>
<td>Row 8,8</td>
<td>Row 9,8</td>
<td>Row 10,8</td>
</tr>
<tr>
<td>Row 3,9</td>
<td>Row 4,9</td>
<td>Row 5,9</td>
<td>Row 6,9</td>
<td>Row 7,9</td>
<td>Row 8,9</td>
<td>Row 9,9</td>
<td>Row 10,9</td>
</tr>
<tr>
<td>Row 3,10</td>
<td>Row 4,10</td>
<td>Row 5,10</td>
<td>Row 6,10</td>
<td>Row 7,10</td>
<td>Row 8,10</td>
<td>Row 9,10</td>
<td>Row 10,10</td>
</tr>
<tr>
<td>Row 3,11</td>
<td>Row 4,11</td>
<td>Row 5,11</td>
<td>Row 6,11</td>
<td>Row 7,11</td>
<td>Row 8,11</td>
<td>Row 9,11</td>
<td>Row 10,11</td>
</tr>
</tbody>
</table>
</div>
</div>
<table style="width: 900px;">
<colgroup span="8" style="background-color:orange; width: 90px;"></colgroup>
<tfoot>
<tr>
<td>Foot 3</td>
<td>Foot 4</td>
<td>Foot 5</td>
<td>Foot 6</td>
<td>Foot 7</td>
<td>Foot 8</td>
<td>Foot 9</td>
<td>Foot 10</td>
</tr>
</tfoot>
</table>
</div>
<div class="Right" style="position: relative; overflow: hidden; width: 200px;">
<table style="width: 200px">
<colgroup span="2" style="background-color:green; width: 90px;"></colgroup>
<thead>
<tr>
<td>Column 11</td>
<td>Column 12</td>
</tr>
</thead>
</table>
<div class="tbRightWrapper" style="height:200px; overflow-y: scroll; overflow-x: hidden; width: 200px;">
<table class="tbRight" style="width: 200px">
<colgroup span="2" style="background-color:blue; width: 90px;"></colgroup>
<tbody>
<tr>
<td>Row 11,1</td>
<td>Row 12,1</td>
</tr>
<tr>
<td>Row 11,2</td>
<td>Row 12,2</td>
</tr>
<tr>
<td>Row 11,3</td>
<td>Row 12,3</td>
</tr>
<tr>
<td>Row 11,4</td>
<td>Row 12,4</td>
</tr>
<tr>
<td>Row 11,5</td>
<td>Row 12,5</td>
</tr>
<tr>
<td>Row 11,6</td>
<td>Row 12,6</td>
</tr>
<tr>
<td>Row 11,7</td>
<td>Row 12,7</td>
</tr>
<tr>
<td>Row 11,8</td>
<td>Row 12,8</td>
</tr>
<tr>
<td>Row 11,9</td>
<td>Row 12,9</td>
</tr>
<tr>
<td>Row 11,10</td>
<td>Row 12,10</td>
</tr>
<tr>
<td>Row 11,11</td>
<td>Row 12,11</td>
</tr>
</tbody>
</table>
</div>
<table style="width: 200px">
<colgroup span="2" style="background-color:green; width: 90px;"></colgroup>
<tfoot>
<tr>
<td>Foot 11</td>
<td>Foot 12</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- #main -->
</body>
</html>
//tableCtrl CONSTRUCTOR
var TableCtrl = function(minWidth, maxWidth) {
this.minWidth = minWidth;
this.maxWidth = maxWidth;
this.LEFT = $('.Left');
this.MIDDLE = $('.Middle');
this.RIGHT = $('.Right');
this.MAIN = $('.main');
this.TB_LEFT = $('.tbLeft');
this.TB_LEFT_WRAPPER = $('.tbLeftWrapper');
this.TB_RIGHT_WRAPPER = $('.tbRightWrapper');
this.TB_MIDDLE_WRAPPER = $('.tbMiddleWrapper');
}
TableCtrl.prototype = {
constructor: TableCtrl,
init: function() {
this.TB_LEFT_WRAPPER.width(2 * this.TB_LEFT_WRAPPER.outerWidth() - this.TB_LEFT.width());
this.MIDDLE.css({
'left': this.LEFT.position().left + this.LEFT.outerWidth(),
'min-width': this.minWidth,
'width': this.MAIN.innerWidth() - this.LEFT.outerWidth() - this.RIGHT.outerWidth()
});
this.TB_MIDDLE_WRAPPER.css({
'min-width': this.minWidth
});
this.RIGHT.css({
'left': this.MIDDLE.position().left + this.MIDDLE.outerWidth()
});
this.TB_RIGHT_WRAPPER.scroll(this.scroll('.tbLeftWrapper', '.tbMiddleWrapper'));
this.TB_LEFT_WRAPPER.scroll(this.scroll('.tbRightWrapper', '.tbMiddleWrapper'));
this.TB_MIDDLE_WRAPPER.scroll(this.scroll('.tbLeftWrapper', '.tbRightWrapper'));
this.resize(null);
},
scroll: function(row1, row2) {
return function() {
console.log('scrolling - ' + row1 + ' - ' + row2);
$(row1).scrollTop($(this).scrollTop());
$(row2).scrollTop($(this).scrollTop());
}
},
resize: function(event) {
console.log(this);
console.log(event);
console.log(this.MAIN.innerWidth() - this.LEFT.outerWidth() - this.RIGHT.outerWidth());
var width = this.MAIN.innerWidth() - this.LEFT.outerWidth() - this.RIGHT.outerWidth();
if (width > this.maxWidth) width = this.maxWidth;
this.MIDDLE.width(width);
this.RIGHT.css({
'left': this.MIDDLE.position().left + this.MIDDLE.outerWidth()
});
}
}
$(document).ready(function() {
console.log('document ready')
var table = new TableCtrl(200, 600);
table.init();
$(window).resize(function(event){
table.resize(event)});
});
/* Styles go here */