Get Table Cell Height’s with Javascript

Before I begin, I’ve only tested this using Firefox on a Mac, but it should work in any browser…

I’ve seen a lot of people trying to find out the height of a table cell, and I have on many occasions have tried myself only to give up. You can get the height of a cell, but it’s always going to be the height you set it to, not the height it becomes after data has been placed into it and it expands. What a pain, right? Well, I’ve found a solution to this problem, though it involves a few DIVs and javascript.

So, say you have this:

<td>
	a really long string of text that takes up multiple
	lines and you have no way of knowing how tall this TD
	is.
</td>

Instead of that, change it to:

<td>
	<div id="content_top"></div>
	<div id="content">
		a really long string...
	</div>
	<div id="content_bottom"></div>
</td>

See where I’m going? We have pretty much created two points to measure by… the content_top DIV and the content_bottom DIV. Now, how do we measure them?

Whenever we need the height, we call a function, say getTDHeight(). getTDHeight looks something like this:

function getTDHeight(){
	contentTopDiv = document.getElementById("content_top")
	contentBotDiv = document.getElementById("content_bottom")
	contentTop = getPixelsFromTop(contentTopDiv);
	contentBottom = getPixelsFromTop(contentBotDiv);
	contentHeight = contentBottom - contentHeight;
	alert("The cell height is " + contentHeight);
}

So basically we are asking a function called getPixelsFromTop to give us the number of pixels the element “content_top” is from the top of the browser window. The same for the element “content_bottom”. With this, we’ll have something like content_top = 100 and content_bottom = 350. So we take the top value away from the bottom and that leaves us with the height of the cell… 250px

The getPixelsFromTop function is no biggie either:

function getPixelsFromTop(obj){
	objFromTop = obj.offsetTop;
	while(obj.offsetParent!=null) {
		objParent = obj.offsetParent;
		objFromTop += objParent.offsetTop;
		obj = objParent;
	}
	return objFromTop;
}

All it does is constantly adds the objects location from the top of it’s parent container, then loops up to that parent and repeats until it hits the top of the DOM, then returns the value.

Here is the code working.

Hope this helps. I’ve seen a lot of frustration over this on many forums. I know it’s a pain, but at least it is possible.

18 comments

nice tips…but in getTDHeight() is “contentHeight = contentBottom – contentTop;” instead of “contentHeight = contentBottom – contentHeight;”. And i use mozilla firefox in windows, and i have add the var declarations for each variables

Very good trick. Nice from your part to share it with us.

it would seem this would only return the height if it were the tallest cell in the table

Federico is right;

This line is wrong:
contentHeight = contentBottom – contentHeight;

If should say this instead:
contentHeight = contentBottom – contentTop;

I’ve tried this script on IE 7, FireFox and Google Chrome on PC, and it works on all.

Thanks 🙂

Thanks alot..it really helped..I had to stretch an absolute block in a td and IE 6 didn’t like the top:0 and bottom:0..it only likes the first one..so thanks to your script, I managed to modify the height of the block (the only way to stretch it) according to the td height!! It worked like a charm!!

thanks again 🙂

Hi m8,

I managed to get it working, thank u v much indeed! whats the deal with firefix though, do u have a working version for this also?

Nice workaround. However, this seems to work just fine in IE6+ but am unable to get Firefox3 to respond (no errors either). What’s the last version of Firefox this was tested in?

DOH! Sorry…I was trying to take this one step further and explicitly set TD heights (based on the results from your workaround above). Your workaround results work fine – but this explicit setting of TD heights in Firefox is not (my mixup). 🙂

It’s not “height’s”, it’s “heights”

Thanks for the code.

Your code really help me, Thanks a lot

Why don’t you use

document.getElementById(theID).offsetHeight

Thanks very much!
It worked fine for me.

Thanks a lot! It works very well.
However, I used it to dynamically change an iFrame height based on the height of the table cell (content of the page is in this cell) in the html document that is loaded into the iFrame!
It works very well in IE ver 6, 7, and 8 BUT it is not working in Safari and Chrome! Actually this function still is returning the Cell’s Height value correctly even in Safari & Chrome BUT I can not change the Height of my iFrame and even the outer DIV of my iFrame to the new height value returned from this function!
As I said it’s working in IE but not in Safari & Chrome!!!
Can anybody help?

Pingback: Capturing HTML Height on the Fly « W303