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.

Accepted Answer

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

Td height on two separate tables

Solution

Problem