Question

I have been looking into this for some hours now and can’t figure it out.
I am trying to write some code to align table headers and table columns,
I am trying to figure out the overall width of the header cell and the width of a column.
but for some strange reason tdOffset gets a value and thOffset is NaN.

$("#tblTasks tbody tr:eq(0) td").each(function(index)
{
    tdOffset = parseInt(this.offsetWidth);

    thEl = $('#tblTasks thead tr:eq(0) th:eq(' + index.toString() + ')').first();
    thOffset = parseInt(thEl.offsetWidth);

    alert('tdOffSet' + tdOffset + ' thOffset:' + thOffset);
}

Can someone point out what am I doing wrong?

Thanks and be happy.

Answer 1

The reason that this.offsetWidth works and thEl.offsetWidth does not is that this refers to a DOM element and thEl refers to a jQuery object.

You can get access to the DOM element “behind” thOffset by doing the following

thEl[0].offsetWidth