title: Control Two HTML Tables With One Scroll Bar
body: <p>I have two separate tables of hopefully same height side by side. I want to be able to have the two communicate with each other so that when I scroll the right table down, the left table will also scroll with it in sync. </p>
  
  <p>As of now, the only way I could think of doing this is by enclosing both of them in a div, but this messes with my sizing settings when I try so. Is there a better way of having the two tables communicate and scroll up and down at the same time?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Scrollable y-axis line of days above the scheduler --&gt;
    &lt;div id="table-wrapper-days"&gt;
      &lt;div id="table-scroll-days"&gt;
        &lt;table id="dayRow" class="tableDays"&gt;
          &lt;tr&gt;
            &lt;td&gt;Monday 5/7&lt;/td&gt;
            &lt;td&gt;Tuesday 5/8&lt;/td&gt;
            &lt;td&gt;Wednesday 5/9&lt;/td&gt;
            &lt;td&gt;Thursday 5/10&lt;/td&gt;
            &lt;td&gt;Friday 5/11&lt;/td&gt;
            &lt;td&gt;Saturday 5/12&lt;/td&gt;
            &lt;td&gt;Sunday 5/13&lt;/td&gt;
            &lt;td&gt;Monday 5/14&lt;/td&gt;
            &lt;td&gt;Tuesday 5/15&lt;/td&gt;
            &lt;td&gt;Wednesday 5/16&lt;/td&gt;
            &lt;td&gt;Thursday 5/17&lt;/td&gt;
            &lt;td&gt;Friday 5/18&lt;/td&gt;
            &lt;td&gt;Saturday 5/19&lt;/td&gt;
            &lt;td&gt;Sunday 5/20&lt;/td&gt;
            &lt;td&gt;Monday 5/21&lt;/td&gt;
            &lt;td&gt;Tuesday 5/22&lt;/td&gt;
            &lt;td&gt;Wednesday 5/23&lt;/td&gt;
            &lt;td&gt;Thursday 5/24&lt;/td&gt;
            &lt;td&gt;Friday 5/25&lt;/td&gt;
            &lt;td&gt;Saturday 5/26&lt;/td&gt;
            &lt;td&gt;Sunday 5/27&lt;/td&gt;
            &lt;td&gt;Monday 5/28&lt;/td&gt;
            &lt;td&gt;Tuesday 5/29&lt;/td&gt;
            &lt;td&gt;Wednesday 5/30&lt;/td&gt;
            &lt;td&gt;Thursday 5/31&lt;/td&gt;
            &lt;td&gt;Friday 6/1&lt;/td&gt;
            &lt;td&gt;Saturday 6/2&lt;/td&gt;
            &lt;td&gt;Sunday 6/3&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Scrollable x-axis column of employees to the left of the scheduler --&gt;
    &lt;div id="table-wrapper-employees"&gt;
      &lt;div id="table-scroll-employees"&gt;
        &lt;table id="employeeCol" class="tableEmployees"&gt;
          &lt;tr&gt;&lt;td&gt;Employee A&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee B&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee C&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee D&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee E&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee F&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee G&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee H&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee I&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee J&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee K&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee L&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee M&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee N&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee O&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee P&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee Q&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee R&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee S&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee T&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee U&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee V&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee W&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee X&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee Y&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Employee Z&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="table-wrapper-tasks"&gt;
    &lt;div id="table-scroll-tasks"&gt;
      &lt;script&gt;
        var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
        var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
        var rowT = null;
  
        var drawTable = '&lt;table class="tableTasks"&gt;';
          for (let i = 0; i &lt; rows; i++) {
            drawTable += '&lt;tr&gt;';
            for(let j = 0; j &lt; cols; j++) {
              drawTable += '&lt;td&gt;&lt;/td&gt;';
            }
            drawTable += '&lt;/tr&gt;';
          }
          drawTable += '&lt;/table&gt;';
  
          document.write(drawTable);
        &lt;/script&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* To control the style of the overall table class */
  table {
    border: 1px solid black;
    text-align: center;
    table-layout: fixed;
  }
  
  th, td {
    border: 1px solid black;
    width: 140px;
    height: 35px;
  }
  
  /* Settings for Days row */
  .tableDays {
    width: 140px;
  }
  
  /* Settings for Employee column */
  .tableEmployees {
    line-height: 35px;
  }
  
  /* Settings for Tasks table */
  .tableTasks {
    width:100%;
    margin-top:5px;
    empty-cells: show;
    height:1000px;
    line-height: 35px;
    width: 100px;
  }
  
  .empTaskCont {
    height: 500px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;
  }
  
  #table-wrapper-days {
    position: relative;
    width:1064px;
    margin-left: 252px
  }
  
  #table-scroll-days {
    height: auto;
    overflow-x: scroll;
  }
  
  #table-wrapper-employees {
    position: relative;
    float:left;
    width:18%;
    margin-top:8px;
  }
  
  #table-scroll-employees {
    width: auto;
    overflow-y: scroll;
    max-height: 500px;
  }
  
  #table-wrapper-tasks {
    position: relative;
    width:81%;
    float:right;
  }
  
  #table-scroll-tasks {
    overflow-x: scroll;
    overflow-y: scroll;
    max-height: 522px;
  }
  
  .employee-mod-btn{
    float:left;
  }
  </code></pre>
  
  <p>I included a jsfiddle for my code: <a href="https://jsfiddle.net/Lqzyw4u4/6/#&amp;togetherjs=5vkFrp9DEa" rel="nofollow noreferrer">https://jsfiddle.net/Lqzyw4u4/6/#&amp;togetherjs=5vkFrp9DEa</a></p>
  
  <p>Thank you for your time.</p>