title: ScrollPane table not aligning acordingly
body: <p>I have a <code>ScrollPane</code> named <code>options</code>, and 4 tables named: <code>changeOptions</code>, <code>settingNames</code>, <code>backAndApply</code>, <code>overlay</code>. I have placed the first two tables inside the <code>overlay</code> table, and then added the <code>overlay</code> table into the <code>ScrollPane</code>. My problem is when I try to align the table <code>settingNames</code> to the left of <code>overlay</code>, it doesn't align.  Same goes for <code>changeOptions</code>. I activated debug, and the two tables are just pressed against each other.</p>
  
  <p>This is my code:</p>
  
  <pre><code>/** Setting up a lot of variables before this, and adding them to their respected table.*/   
  overlay.add(settingNames).left();
  overlay.add(changeOptions).right();
  options = new ScrollPane(overlay, scrollStyleSkin);
  overlay.setWidth(Gdx.graphics.getWidth() - options.getScrollBarWidth());
  cntStage.addActor(backAndApply);
  options.setFadeScrollBars(false);
  options.setBounds(
          0,
          (white.getBounds("|").height * 2),
          Gdx.graphics.getWidth(),
          (Gdx.graphics.getHeight() / 2 - (white.getBounds("|").height * 2)));
  overlay.debug();
  </code></pre>
  
  <p>If I am not doing this correctly, please tell me.</p>