Question

I have two separate tables on which I use a focus+hover function on each tr that works great on both tables simultaneous, my problem is with td height because if the description of a td from fist table is greater will be displayed on two rows in the same td and the height of td will be modified but only into first table td. How is possible to remember the height to the td from first table and to add that on td from second table in order to have both td same size.
In my example only first two tr are displayed ok the other two are displayed not ok because of description of first table td.

fiddle example:
http://jsfiddle.net/Ksb2W/45/

   for bounty  please check this example to see the difference on chrome and ie8:

http://mainpage.ueuo.com/

Thank you.

Answer 1

If I’ve understood you correctly you want the heights within each row of both tables to be the same?

If so, this should work:

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).height());
});

Obviously the use of :first and :last selectors is not ideal, you should amend those to be id selectors.

Example fiddle

---

UPDATE

The solution to the problem you’ve mentioned in your bounty is because of the border on the td elements not being accounted for.

Replace height() with outerHeight() when checking the current row and it should work fine:

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).outerHeight());
});