Question

I am setting height of a tr dynamically using jquery. The code is run on document.ready.
I debugged the code and saw that the height to set is coming proper (493) but when I assign it, to the tr, it is still showing 3193 while when I see $(this)[0].style.height, it shows 493px. I am confused how can that be different.

Code –

$(document).ready(function () {
    var heightToSet = $(window).height();
    $('#tr1').height(heightToSet);
});

Note that elements in the table are big and due to this, there is no scrollbar.

Answer 1

this refers to the document element in your code. You probably want to set the height of the body element or a descendant of the body element.

Look at your console for this JSFiddle, you’ll see what this is in your event handler: http://jsfiddle.net/qwk6x/

Update

You can change the CSS of the TD elements in your table to not show the overflow. Currently you are setting a height but it’s being ignored because the content of the element makes it much lager than the set height:

CSS —

td {
    display     : block;
    overflow    : hidden;
    white-space : nowrap;
}​

JS —

$(function () {
    $('#tr1').children().height($(window).height());
});​

Here’s a demo: http://jsfiddle.net/qwk6x/3/