Question

I have two tables, with same amount of tr’s. They are both loading dynamically and I can’t merge them. Here’s how they look like for example: LINK

The content of first table is loading from database and sometimes users can enter 3 or 4 lines of text into td (that’s why I can’t declare table/tr/td height). Content of second table is always the same (there will be always one line of text)

Is it possible (with javascript/jquery), that table 2 somehow inherit table rows height from table 1 (if user enter longer text) and perfectly align like here: LINK ?

I’m trying to do it like this but I have completely no idea how to check height of an element without declaring it in css first:

var tableH = $("#table1 tr").height();
$("#table2 tr").css("min-height", tableH);

Answer 1

This gets pretty close

var itemNum = 0;

$("#table1 tr").each(function() {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
  itemNum++;
});

EDIT

Added +1 to itemNum. nth-child is 1-based. Seems to work on your fiddle

EDIT 2

As per thirdender’s suggestion, this can be simplified to

$("#table1 tr").each(function(itemNum) {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
});