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.