Td height on two separate tables

Question

I have two separate tables on which I use the focus + hover function for each tr, which works fine on both tables at the same time, my problem is with the height td, because if the description of the td table from fist is longer, it will be displayed on two lines in the same td and height td will be changed, but only in the first table td. How can I remember the height for td from the first table and add it to td from the second table to have the same size as td. In my example, only the first two tr are displayed, the other two are not displayed normally due to the description of the first td table.

Sample script: http://jsfiddle.net/Ksb2W/45/

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

http://mainpage.ueuo.com/

Thanks.

Answer 1

If I understand correctly, do you want the heights in 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 using the :first and :last selectors is not ideal, you should change them as id selectors.

Script example

---

UPDATE

The solution to the problem that you mentioned in your award is due to the fact that the boundaries of the td elements are not taken into account.

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 maximum height of all tr elements, and then set the height of all tr 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 might have misunderstood your question ... this will set the height of all tr to the same height)

Answer 3

Add some id to the tables and add this piece of code:

 var rows1 = $("#first tr"); var rows2 = $("#second tr"); rows1.each(function() { $(rows2[$(this).index()]).height($(this).height()); }) 

JsFiddle works here: http://jsfiddle.net/Ksb2W/51/

Answer 4

To do what you want, you can only have one table with an empty column without a border between the two parts. That way, the cell height will still be dynamic based on the content, but it will also be consumed by all cells in a row on both sides of the table.

Answer 5

this will resize the row on the fly

 $(function(){ var rows = $('.interactive tr'); rows.click(function () { var i = $(this).GetIndex() + 1; // nth-child is 1-based rows.removeClass('selectedRow'); rows.filter(':nth-child(' + i + ')').addClass('selectedRow').height($(this).children('td')[0].offsetHeight); }); rows.hover(function(){ var i = $(this).GetIndex() + 1; rows.filter(':nth-child(' + i + ')').addClass('hoverx').height($(this).children('td')[0].offsetHeight);; },function(){ rows.removeClass('hoverx'); }); }); jQuery.fn.GetIndex = function(){ return $(this).parent().children().index($(this)); } 

Answer 6

Well, I think I'm a little late, you can see a button that fixes the height of the second table, here:

http://jsfiddle.net/Ksb2W/54/

You can put this line of code in your document.ready function, and it should do the trick:

 $(function(){ $('#c').attr('height', $('#b').css('height')); }); 

It is also important to change the CSS for the <td> elements with this property:

 box-sizing: border-box; 

Here is a reliable solution that will match all row heights from 2 tables specified in the id table. There are 4 lines in the document.ready function, there is no need to directly modify css:

 $('td').css('box-sizing','border-box'); $('#t2').children().children().each(function(i, value) { $(this, ':nth-child(1)').attr('height', $('#t1').children().children(':nth-child(' + parseInt(i + 1) + ')').css('height')); }); 

See the fiddle here: http://jsfiddle.net/Ksb2W/55/

Answer 7

  $('#t1 tr').each(function(i) { if ($(this).height() > $('#t2 tr:nth-child(' + (i + 1) + ')').height()) $('#t2 tr:nth-child(' + (i + 1) + ')').height($(this).height()); else if ($(this).height() < $('#t2 tr:nth-child(' + (i + 1) + ')').height()) $(this).height($('#t2 tr:nth-child(' + (i + 1) + ')').height()); }); 

Adding this parameter to your script resizes each line if its value is greater. In this case, although you must provide your table identifiers. Like in this fiddle: http://jsfiddle.net/Ksb2W/88/