The following HTML demonstrates the problem I'm having.
I'm simulating scrollable data table with fixed header (Yes, I know this works natively in NS6+, but I have to also support IE6+ where it doesn't work). My tables have two heading rows. The columns in the first header row can span multiple columns in the 2nd header row. Notice that even though I've specified the column widths, the header table doesn't match the data table.
The header table 2nd row is evenly spaced (within each column span) while the data table honors the widths. How can I get the 2nd header row to honor the column widths???
<TABLE WIDTH='100%'>
<TR>
<TD>
<TABLE BORDER=1 WIDTH='100%' STYLE='table-layout:fixed'>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<th COLSPAN='2' width='40%'>head1,2</th>
<th COLSPAN='3' width='52%'>head3,4,5</th>
<th COLSPAN='1' width='5%'>head6</th>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<TD width='35%'>head1</TD>
<TD width='5%'>head2</TD>
<TD width='17%'>head3</TD>
<TD width='10%'>head4</TD>
<TD width='25%'>head5</TD>
<TD width='5%'>head6</TD>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<DIV STYLE='width:100%'>
<TABLE BORDER=1 WIDTH='100%' STYLE='table-layout:fixed'>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<TD width='35%'>Data1</TD>
<TD width='5%'>Data2</TD>
<TD width='17%'>Data3</TD>
<TD width='10%'>Data4</TD>
<TD width='25%'>Data5</TD>
<TD width='5%'>Data6</TD>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<TD width='35%'>Data1</TD>
<TD width='5%'>Data2</TD>
<TD width='17%'>Data3</TD>
<TD width='10%'>Data4</TD>
<TD width='25%'>Data5</TD>
<TD width='5%'>Data6</TD>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>
I'm simulating scrollable data table with fixed header (Yes, I know this works natively in NS6+, but I have to also support IE6+ where it doesn't work). My tables have two heading rows. The columns in the first header row can span multiple columns in the 2nd header row. Notice that even though I've specified the column widths, the header table doesn't match the data table.
The header table 2nd row is evenly spaced (within each column span) while the data table honors the widths. How can I get the 2nd header row to honor the column widths???
<TABLE WIDTH='100%'>
<TR>
<TD>
<TABLE BORDER=1 WIDTH='100%' STYLE='table-layout:fixed'>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<th COLSPAN='2' width='40%'>head1,2</th>
<th COLSPAN='3' width='52%'>head3,4,5</th>
<th COLSPAN='1' width='5%'>head6</th>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<TD width='35%'>head1</TD>
<TD width='5%'>head2</TD>
<TD width='17%'>head3</TD>
<TD width='10%'>head4</TD>
<TD width='25%'>head5</TD>
<TD width='5%'>head6</TD>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<DIV STYLE='width:100%'>
<TABLE BORDER=1 WIDTH='100%' STYLE='table-layout:fixed'>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<TD width='35%'>Data1</TD>
<TD width='5%'>Data2</TD>
<TD width='17%'>Data3</TD>
<TD width='10%'>Data4</TD>
<TD width='25%'>Data5</TD>
<TD width='5%'>Data6</TD>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
<TR>
<td width='45' style='border-left:none;border-right:none;border-bottom:thin groove'> </th>
<TD width='35%'>Data1</TD>
<TD width='5%'>Data2</TD>
<TD width='17%'>Data3</TD>
<TD width='10%'>Data4</TD>
<TD width='25%'>Data5</TD>
<TD width='5%'>Data6</TD>
<th style='border:none' align='left' width='20px' > </TH>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>