<THead> will not scroll horizontally with the rest of table

function GetDivHeight()
{
	var screenHeight=window.parent.document.body.clientHeight;
	var screenWidth=window.parent.document.body.clientWidth;
	var newWidth=screenWidth-16;
	var newHeight=screenHeight-94;
	document.getElementById("DetailView").style.height=newHeight;
	document.getElementById("DetailView").style.width=newWidth;
}

<div class="tableContainer" id="DetailView" style="width: 967px; height: 265px; overflow: auto;">
<table style="width: 967px; ; width: expression(document.body.clientWidth);" border="0" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD id=PrintableSection>
<TABLE class=ScrollTable border=0 cellSpacing=0 cellPadding=0 width="100%">
<THEAD>
<TR>
<TH style="TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px" vAlign=center>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><IMG border=0 src="../images/TableCellLeft-InActive.gif"></TD>
<TD style="PADDING-LEFT: 2px; PADDING-RIGHT: 2px" class=UnSorted vAlign=center width="100%" noWrap><A style="BORDER-BOTTOM: medium none; TEXT-ALIGN: left; BORDER-LEFT: medium none; FONT-FAMILY: tahoma,Arial,Helvetica,sans-serif; COLOR: black; BORDER-TOP: medium none; BORDER-RIGHT: medium none; TEXT-DECORATION: none" href="javascript:Sort('s','ascending','number')"></A></TD>
<TD style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><IMG border=0 src="../images/TableCellRight-InActive.gif"></TD></TR></TBODY></TABLE></TH>
<TH style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px" vAlign=center align=left>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><IMG border=0 src="../images/TableCellLeft-InActive.gif"></TD>
<TD style="PADDING-LEFT: 2px; PADDING-RIGHT: 2px" class=UnSorted vAlign=center width="100%" noWrap><A style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; FONT-FAMILY: tahoma,Arial,Helvetica,sans-serif; COLOR: black; BORDER-TOP: medium none; BORDER-RIGHT: medium none; TEXT-DECORATION: none" href="javascript:Sort('t','ascending','number')">t</A></TD>
<TD style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><IMG border=0 src="../images/TableCellRight-InActive.gif"></TD></TR></TBODY></TABLE></TH>
<TH style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px" vAlign=center align=left>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><IMG border=0 src="../images/TableCellLeft-InActive.gif"></TD>
<TD style="PADDING-LEFT: 2px; PADDING-RIGHT: 2px" class=UnSorted vAlign=center width="100%" noWrap><A style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; FONT-FAMILY: tahoma,Arial,Helvetica,sans-serif; COLOR: black; BORDER-TOP: medium none; BORDER-RIGHT: medium none; TEXT-DECORATION: none" href="javascript:Sort('u','ascending','number')">u</A></TD>
<TD style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><IMG border=0 src="../images/TableCellRight-InActive.gif"></TD></TR></TBODY></TABLE></TH>
<TH style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px" vAlign=center align=left>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
</TR></TBODY>
<TBODY>
<TR></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>