title: Unwanted spacing between inline-table elements
body: <p>I want to make dynamic width columns inside of dynamic width div. Everything seems to be working just fine, but if I want to make the sum of column widths 100%, the third column jumps down even though there is still space. And I can't get rid of the spacing after each column. 
  Maybe some of you might know why?
  Here is my fiddle!
  <a href="http://jsfiddle.net/vMe5L/" rel="nofollow">http://jsfiddle.net/vMe5L/</a>
  My code: </p>
  
  <pre><code>&lt;style&gt;
  .content { width: 300px; height: 200px; background-color: gray; }
  .left { width: 20%; display: inline-table; height: 100%; background-color: red; }
  .middle { width: 30%; display: inline-table; height: 100%; background-color: blue; } 
  .right { width: 47%; display: inline-table; height: 100%; background-color: yellow; }
  &lt;/style&gt;
  
  &lt;div class="content"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="middle"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance, you guys are amazing.</p>