title: jQuery: How to sync table cell/row heights
body: <p>How can I synchronize the row-heights of two tables (which makes them look like ONE table if placed next to each other)?
  Here's a JSFiddle <a href="http://jsfiddle.net/2B8sy/" rel="nofollow noreferrer">http://jsfiddle.net/2B8sy/</a>
  Works fine in Firefox - doesn't work in Chrome or IE.</p>
  
  <p><img src="https://i.stack.imgur.com/dlSoj.png" alt=""></p>
  
  <p>Problem is, passing jQuerys <code>.height()</code> of a cell to another cells <code>.height()</code> makes the cells not equal in height in Chrome and IE - works fine in Firefox though.</p>
  
  <p><img src="https://i.stack.imgur.com/KIzaN.png" alt=""></p>
  
  <p>As you can see in the Fiddle, the first rows are always 2 pixels too short. Happens to all rows. This is for Chrome and IE10. Everything is fine in Firefox.</p>
  
  <p>Why does <code>element.height(otherElement.height());</code> not make them equal in height?
  Example: <a href="http://jsfiddle.net/2B8sy/" rel="nofollow noreferrer">http://jsfiddle.net/2B8sy/</a></p>
  
  <p>I also tried window.getComputedStyle, but I got the same results there.</p>