jQuery UI tabs activate event not functioning correctly

Question

I have a div with different tabs each containing a table. Content is going to be dynamically loaded into each table so I need a way to set the height of the th and tr elements of each table equally. For example, if table1 has a th height of 50px than table2 will also need to have a th height of 50px.

The code I am using works but for some reason it added one pixel the height of each element on each tab switch. For example, if I click on the second tab all tr elements will be 50px. If I click to the first tab and then back to the second tab, the tr elements will change to 51px tall. If I click back to the first tab and then the second tab, the tr elements will change to 52px tall etc. etc.

Here is my code:

$( "#new-locations-tabs" ).tabs({
  activate: function(events, ui) {
    var getHeadingHeight = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css("height");
    $("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", getHeadingHeight);

    var getRowHeight = $("#new-locations-tabs .ui-tabs-panel:visible .left-table td").css("height");
    $("#new-locations-tabs .ui-tabs-panel:visible .right-table td, #new-locations-tabs .ui-tabs-panel:visible .left-table td").css("height", getRowHeight);
  }
});

http://jsfiddle.net/KFcYS/

Answer 1

"Note that the computed style of an element may not be the same as the value specified for that element in a style sheet."

http://api.jquery.com/css

There's probably some calculation rounding happening. Try using height() or outerHeight() instead.

"The difference between .css( "height" ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation."

http://api.jquery.com/height