title: Hide vertical scrollbar in 2 tables, but allow full scroll in one table
body: <p>I want to be able to scroll the whole table together, but having just one vertical scrollbar at the right.
  (The scroll can be done by using the vertical scrollbar at the right, through mousewheel or arrows)</p>
  
  <p>I was able to do that, except that I can't hide the vertical scrollbar from the <code>.fixedTable-body</code> and when I use the mousewheel or arrows hover the <code>.fixedTable-sidebar</code> and <code>.fixedTable-body</code> tables, the vertical scrollbar at the right just acts weird.</p>
  
  <p><strong>What I was able to do:</strong></p>
  
  <ul>
  <li><p>Implement and connect the scroll in all tables body (<em>Js in working fiddle below</em>);</p></li>
  <li><p>Hide vertical scrollbar in <code>.fixedTable-sidebar</code> for Webkit browsers and IE (<em>haven't found solution to hide for FF</em>) --> this was done by:</p></li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>.fixedTable-sidebar::-webkit-scrollbar {
      display: none; /* hide scrollbar for Webkit Browsers */
  }
  .fixedTable-sidebar {
      -ms-overflow-style: none; /* hide scrollbar for IE */
  }
  </code></pre>
  
  <p><strong>What I have tried:</strong></p>
  
  <ul>
  <li>the pseudo class <code>:vertical</code> for webkit browsers, but doesn't work;</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>.fixedTable-body::-webkit-scrollbar:vertical {
      display: none;
  }
  </code></pre>
  
  <ul>
  <li>Not sure if this <code>-ms-overflow-y-style</code> exists for IE, but I tried and doesn't work either;</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>.fixedTable-body {
      -ms-overflow-y-style: none;
  }
  </code></pre>
  
  <ul>
  <li>Also tried to hide the vertical scrollbar with padding, but wasn't able to do it.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/IDQli.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IDQli.png" alt="Explanatory Image"></a></p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I was able to hide the vertical scrollbars from <code>.fixedTable-sidebar</code> and <code>.fixedTable-body</code> by creating an outer <code>div</code> in both elements and giving it <code>overflow: hidden</code>, then make the inner elements <code>.fixedTable-sidebar</code> and <code>.fixedTable-body</code> slightly bigger <code>width &gt; 100%</code> --> with this I was able to hide the scrollbars for all browsers.</p>
  
  <p>Now the <strong>only problem</strong> is the behaviour of the right vertical scrollbar when scroll over the <code>.fixedTable-sidebar</code> and <code>.fixedTable-body</code> (by using the mouse wheel or the keypad arrows)</p>
  
  <p><a href="http://jsfiddle.net/Ju_Oliveira/60s4pLz5/" rel="nofollow noreferrer">See Updated Fiddle</a></p>