Td height on two separate tables

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());
});

Answer 2

Get the max height of all the tr elements and then set the height of all the trs to this height :

// get all heights
var heights = rows.map(function () {
    return $(this).height();
}).get();

// use max to get the max !
var maxHeight = Math.max.apply(null, heights);

// set the height
rows.height(maxHeight);

Working Example

(I think I may have mis-understood your question ... this will set the height of all the trs to the same height)