I am having a presentation issue that I have struggled with for a while. The data that must be displayed must be contained within a DIV. If the data is more than 260px in height a scroll bar is supposed to appear so the data can be scrolled without having to move a scroll bar up and down to adjust the actual web page. My problem has to do with the column headings that describe the data. I do not want the column headings to scroll with the data, but would rather the heading be fixed in place. To date, I have used 2 seperate tables, one for the headings, and one for the column data. I have been able to keep these mostly aligned with one another via the use of percentages in the width attribute of each <TD> tag and <TABLE> tag. However, should the data in a column extend (not the heading column) beyond the columns percentage, it pushes the other columns out of alignment. Even with nowrap off, the text only wraps when a space appears in the text string.
The solution must work in both I.E. 6.0 and Netscape 7(.1).
An idea I had, but am still having trouble implementing, was to have a main DIV of a height of 290 px with an inner div of 260 px. I would not allow the main div to scroll by leaving out that style, and would put the column headings in this div. This would also stand to reason that I would begin a table in this div as well. Inside of the 290px div and inside of the table I would declare the inner div of 260px. I was hoping this way the column headings would be stationary and the inner div would allow the rest of the data to scroll. The problems this has yielded so far are: a great deal white space that pushes the column headings to the bottom of the table visually, and if I do not allow the main DIV to scroll, the inner div will not be able to scroll either. So far I have solved the white space by encasing all divs in a master table and <TR><TD></TD></TR> tags.
The syntax used for my scrolling div is:
<div style="width:100%;height:2
60px;overf
low:auto;o
verflow-x|
overflow-y
:auto;alig
n:center" >
The syntax used for my non scrolling div is:
<div style="width:100%;height:2
60px;" >
Also, all of this is being done in a jsp page. I would really rather not use any javascript code blocks whatsoever.
Any suggestions or solutions would help.
Here is the code that I am using currently to align my columns (which doesn't work that well). My apologies for the formatting. The copy and pasted has messed the alignment up. Due to contractual obligations I have made the code mostly vague, but should be clear enough to discern the structure for the table and such.
Please help.
<TABLE width="100%">
<TR>
<TD>
<table border="1" width="97%" align=left cellspacing=0>
<tr>
<th nowrap="nowrap" width="15%">School</th>
<th nowrap="nowrap" width="15%">Last Name</th>
<th nowrap="nowrap" width="12%">First</th>
<th nowrap="nowrap" width="15%">Middle</th>
<th nowrap="nowrap" width="7%" >Suffix</th>
<th nowrap="nowrap" width="7%">Gender</th>
<th nowrap="nowrap" width="7%">Race</th>
<th nowrap="nowrap" width="9%">Birth Date</th>
<th nowrap="nowrap" width="8%">Remove</th>
</tr>
</table>
</TD>
</TR>
<TR>
<TD width="100%">
<div style="width:100%;height:2
60px;overf
low:auto;o
verflow-x|
overflow-y
:auto;alig
n:center" class="noprint" >
<table border="1" width="100%" align=center cellspacing=0>
<logic:iterate id="object" name="object" indexId="ind">
<tr>
<td width="15%" >bean data</td>
<td width="15%">bean data</td>
<td width="12%">bean data</td>
<td width="15%">bean data</td>
<td width="7%">bean data</td>
<td width="7%">bean data</td>
<td width="7%">bean data</td>
<td width="9%">
bean data
</td>
<td align="center" width="8%">
data
</td>
</tr>
</html:form>
</logic:iterate>
</table>
</DIV>
</TD>
</TR>
</TABLE>
