The answer is very simple. Here we use scroll property of DIV which will help us creating fixed header and footer also fixing columns.

Why Height and Width is applied to DIV?To make some thing scrollable we need to provide less height or width to it. If we specify less height and width to table, it will not work out. So if we have to make Parent element height or width less than child.What is Overflow:Auto?This means Element(Here Div) should get scrollbars when the actual width increases the given width. Here table should be scrollable when it has more height or width. It should not scroll if height or width is less.Position: RelativePosition DIV relatively to its normal positionthead.scrollHead th, thead.scrollHead td, tfoot.scrollFooter td { background-color: #1B82E6; Z-INDEX: 60; POSITION: relative; HEIGHT: 20px;}Why Z-Index is needed?The z-index property specifies the stack order of an element. If you don't put z-Index or if you keep less value here, there are more chance of overlapping between adjacent rows when you scroll.Position: Relative

Expression is IE function which calculate the position of DIV and same position is assigned to THEAD.tfoot.scrollFooter td{ TOP:expression(this.offsetParent.clientHeight - this.offsetParent.scrollHeight + this.offsetParent.scrollTop); }

Here expression TOP for TFOOT.

ie., DIV TOP + DIV HEIGHT - 1 ROW(Scroll Height)

th.fixedLeft, td.fixedLeft {

z-index: 50;

border-right: 1px solid silver;

LEFT: expression(this.offsetParent.scrollLeft-2);

POSITION: relative;

}

The above code is for Left column. It will use expression to calculate LEFT position for Left column.