How can I find the largest cell height of a table using jQuery?

Question

I have a table with variable-length text content cells. I want to find the height of the highest cell, and then make all the cells that are tall. How can i do this?

Answer 1

Like this:

var max = 0; $('table td').each(function() { max = Math.max($(this).height(), max); }).height(max); 

In plain English, swipe all the cells and find the maximum value, then apply this value to all the cells.

Answer 2

Just to be different:

 var heights = $('td').map(function() { return $(this).height(); }).get(); var maxHeight = Math.max.apply(Math, heights); $('td').css('height', maxHeight); 

Answer 3

There are several plugins that can do this for you. However, the code will look like this:

 var tallest = 0; $('table td').each(function() { if (tallest < $(this).height()) { tallest = $(this).height(); } }); $('table td').css({'height': tallest}); 

Answer 4

Paste @tatu ulmanen example

This is obvious, but if you just want to split the rows with higher cells, wrap a tr loop :)

 $('table tr').each(function (){ var max = 0; $(this).find('td').each(function (){ max = Math.max($(this).height(), max); }).height(max); }); 

Answer 5

You can use jQuery with the following code

 var maxHeight = 0; $('#yourTableID td').each(function(index, value) { if ($(value).height() > maxHeight) maxHeight = $(value.height()); }).each(function(index, value) { $(value).height() = maxHeight; }); 

Hope this helps