Table Double Scroll

by Ju Oliveira

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="demo" class="fixedTable">
  <header class="fixedTable-1header">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Utilizador</th>
        </tr>
      </thead>
    </table>
  </header>
  
  <header class="fixedTable-header">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th>F</th>
          <th>G</th>
          <th>H</th>
          <th>I</th>
          <th>J</th>
          <th>K</th>
          <th>L</th>
        </tr>
      </thead>
    </table>
  </header>
  
  <header class="fixedTable-3header">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Todos</th>
        </tr>
      </thead>
    </table>
  </header>
  
  <aside class="fixedTable-sidebar">
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>14567567465447567467</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
        </tr>
        <tr>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
        </tr>
        <tr>
          <td>11</td>
        </tr>
        <tr>
          <td>12</td>
        </tr>
        <tr>
          <td>13</td>
        </tr>
        <tr>
          <td>14</td>
        </tr>
        <tr>
          <td>15</td>
        </tr>
        <tr>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
        </tr>
        <tr>
          <td>18</td>
        </tr>
        <tr>
          <td>19</td>
        </tr>
      </tbody>
    </table>
  </aside>
  <div...

CSS

.fixedTable .table {
  background-color: white;
  width: auto;
}
.fixedTable .table tr td,
.fixedTable .table tr th {
  min-width: 100px;
  width: 100px;
  min-height: 20px;
  height: 20px;
  padding: 5px;
}
.fixedTable-1header {
  width: 110px;
  height: 30px;
  position: absolute;
  overflow: hidden;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
.fixedTable-header {
  width: 510px;
  height: 30px;
  margin-left: 110px;
  overflow: hidden;
  border-bottom: 1px solid #CCC;
}
.fixedTable-3header {
  width: 110px;
  height: 30px;
  margin-left: 620px;
  position: absolute;
  margin-top: -31px;
  overflow: hidden;
  border-left: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
.fixedTable-sidebar {
  width: 110px;
  height: 310px;
  float: left;
  overflow: hidden;
  border-right: 1px solid #CCC;
}
.fixedTable-sidebar-two {
  width: 110px;
  height: 310px;
  float: left;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #CCC;
}
.fixedTable-body {
  overflow-x: auto;
  overflow-y: hidden;
  width: 510px;
  height: 310px;
  float: left;
}

JavaScript

var demo, fixedTable;

fixedTable = function(el) {
  var body, bodyScroll, header, sidebar, sidebarT, sidebarTwo;
  body = $(el).find('.fixedTable-body');
  bodyScroll = $(el).find('.fixedTable-body table');
  sidebar = $(el).find('.fixedTable-sidebar table');
  sidebarTwo = $(el).find('.fixedTable-sidebar-two');
  sidebarT = $(el).find('.fixedTable-sidebar-two table');
  header = $(el).find('.fixedTable-header table');
  $(body).scroll(function() {
    return $(header).css('margin-left', -$(body).scrollLeft());
  });
  return $(sidebarTwo).scroll(function() {
    $(bodyScroll).css('margin-top', -$(sidebarTwo).scrollTop());
    return $(sidebar).css('margin-top', -$(sidebarTwo).scrollTop());
  });
};

demo = new fixedTable($('#demo'));