title: Column alignment issue caused by scrolling
body: <p>I have to make some kind of dashboard. It will be basically a table, with a lot of numbers (those a,b,c-s are all numbers, probably max 3 digits)</p>
  
  <p><img src="https://i.stack.imgur.com/6IMpZ.png" alt="This is what I would like to do"></p>
  
  <p>My problem is, that, as you can see in the picture, I have a few sections which will be dynamic (as in: I don't know how many records) and because of this, I need to add a scrollbar for those sections.</p>
  
  <p>Because of the scroll bars, I cannot put everything in one table (or can I?), and this might cause that the same column might not be aligned all the time. It has to work in basically all the latest version browsers, and I am afraid of losing a pixel to the left or to the right.</p>
  
  <p>What I am trying to achieve is basically something like this: (note that I added the DIV in the wrong place on purpose)</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;a&lt;/td&gt;
      &lt;td&gt;b&lt;/td&gt;
  &lt;/tr&gt;
  &lt;div id="div2" style="overflow-y: auto; overflow-x:hidden; height: 60px;&gt;
  &lt;tr&gt;
      &lt;td&gt;a&lt;/td&gt;
      &lt;td&gt;b&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/div&gt;
  &lt;tr&gt;
      &lt;td&gt;a&lt;/td&gt;
      &lt;td&gt;b&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Not sure if this is important or not, but I would like to use that scrollbar which is showing up onmouseover. <a href="https://stackoverflow.com/questions/7125185/hide-scrollbar-and-show-on-hover-like-facebooks-new-chat-sidebar">Like this one.</a></p>