Question

I am trying to set the height of a th element in a table (templtableselect) the same as the height of the th element in another table (templtable) using the following javascript/jquery code:

var thheight = $('table#templtable th').css("height");
$('table#templtableselect th').css({"height":thheight, "border":"0px"});

In chrome everything works fine, but in firefox there is 1 pixel difference. I also tried the .height() function, but that resulted in the same outcome.

When I analyse the elements in firefox with firebug the result is as following:

Templtable
size 105 x 34
border 1

Templtableselect
size 44 x 33
border 1

You can see the same difference of 1 pixel as well.

Any idea what can causes this difference?

Thanks

Answer 1

Try using outerHeight() instead, it adds the border and padding to the height.

var thheight = $('table#templtable th').outerHeight();
$('table#templtableselect th').css({"height":thheight, "border":"0px"});