title: Set height with Javascript is slow
body: <p>I have two html tables that contains all kind of elements (span, input, select,...) and I want to force the rows of those tables to have the same height. Unfortunately, setting the attribute 'height' on <code>tr</code> or <code>td</code>doesn't work (the row is higher if it contains at least one element that exceed the given height).</p>
  
  <p>I have not found a way how I can force row height with css, so I have written a Javascript function that loop over all the rows, check the height of the row of the left table with the height of the corresponding row in the right table and if they are different I set the height (changing the style) to the  biggest value.</p>
  
  <p>It works... but it is very very slow if the tables have a lot of rows! I think this is due to the fact that each change to the style cause a reflow.</p>
  
  <p>Any hint? Note that I cannot merge the two tables.</p>
  
  <p>Here my code snipped, but maybe I need a total different approach...</p>
  
  <pre><code>var rightTableRows = mainTable.children("tbody").children("tr:parent");
  var leftTableRows = colHeader.children("tbody").children("tr:parent");
  
  for (chr=0;chr &lt; leftTableRows .length;chr++) {
      var rowLeft = leftTableRows [chr];
      var heightleft = rowLeft.offsetHeight;
      var rowRight = rightTableRows[chr];
      var heightright = rowRight.offsetHeight;
      if(heightleft != heightright){
              console.log("left: "+heightleft +" - right: "+heightright);
          if(heightleft&gt;heightright){
             rowRight.setAttribute("style","height:"+heightleft+"px");
          }else{
             rowLeft.setAttribute("style","height:"+heightright+"px");
          }
      }
  
  }
  </code></pre>