Solved

How do I align columns from one table with another...DIV HTML JSP JAVA BEAN

Posted on 2004-09-20
20
842 Views
Last Modified: 2013-11-21
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:260px;overflow:auto;overflow-x|overflow-y:auto;align:center"  >

The syntax used for my non scrolling div is:
<div style="width:100%;height:260px;"  >

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:260px;overflow:auto;overflow-x|overflow-y:auto;align: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>
0
Comment
Question by:jbaisden
  • 11
  • 7
  • 2
20 Comments
 
LVL 11

Expert Comment

by:raj3060
ID: 12105087
Something like this,

===========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">Last Name</td>

<td width="50%">First Name</td>
</tr>
</table>
<div style="width:100%; height:15%; overflow-y:auto;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">Hello</td>
<td width="50%">Hello</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
</tr>
<tr>
<td>Evans</td>
<td>Sara</td>
</tr>
<tr>
<td>Pumpkin</td>
<td>Pie</td>
</tr>
</table>
</div>

</body>
</html>
====================
0
 

Author Comment

by:jbaisden
ID: 12105443

raj3060...I appreciate your reply, but that is the setup I origionally had. The problem with that setup is that the headings are not guaranteed to stay aligned with the columns on various resolutions. The code below illustrates the problem I am describing with your solution. I believe that both the column heading and the column data must be in the same table, but perhaps they may be in seperate <DIV> tags.

<!-----------CODE THAT ILLUSTRATES COLUMN ALIGNMENT PROBLEM ----------->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="15%">School</td>
<td width="15%">Last Name</td>
<td width="12%">First</td>
<td width="15%">Middle</td>
<td width="7%">Suffix</td>
<td width="7%">Gender</td>
<td width="7%">Race</td>
<td width="9%">Birth Date</td>
<td width="9%">Remove</td>

</tr>
</table>
<div style="width:100%; height:15%; overflow-y:auto;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello000000000000000000000</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>
<tr>
<td width="15%">Hello</td>
<td width="15%">Hello</td>
<td width="12%">Hello</td>
<td width="15%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="7%">Hello</td>
<td width="9%">Hello</td>
<td width="9%">Hello</td>
</tr>

</table>
</div>

</body>
</html>
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12106312
That change is because of the scrollbar..
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12106573
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12106611
This is more what you are looking for;

=++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="overflow:auto;height:100px;">
   <table width="100%">
      <TR style="position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left">
         <TH nowrap>Header A</TH>
         <TH nowrap>Header B</TH>
         <TH nowrap>Header C</TH>
      </TR>
      <TR>
         <TD>aaaaaa</TD>
         <TD>B</TD>
         <TD>Ccccccccccccccccccc</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>Bbbbbbb</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
      <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
      </TR>
   </table>
</div>

</body>
</html>
++++++++++++++++++++++++++
-Raj
0
 

Author Comment

by:jbaisden
ID: 12106676
This is very very close. The only thing is the table heading scrolls in Netscape 7.1. I need the heading to not scroll. Thank you for your help thus far. I'm sure this is very close.

-jbaisden
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12106727
Then the closest thing will be to use JavaScript.
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12106736
change TH to TD and see if that works because I guess netscape does not recognize TH.
-Raj
0
 

Author Comment

by:jbaisden
ID: 12106818

Do you know of the Netscape equivalent for the key words you used:

position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left"

I feel pretty sure I can figure it out from here. I did try changing the TH's to TD but that didn't get the columns to scroll. My guess is the expression(..) syntax is what is throwing netscape off. The items in the DOM for it are named a little differently, but I'll do a little research and find there names.

position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left"

Could you explain in laymens terms what the above syntax is saying, please? It is mostly the top:expression(this.offsetParent.scrollTop) that is throwing my understanding off.

Thanks for your help in this.


jbaisden
0
 

Author Comment

by:jbaisden
ID: 12114075
Well I have made some progress. The following is as close to a cross browser solution as I have come up with without explicity using javascript code blocks. However, a javascript browser check before the start div tag and the end div tag will eliminate some of the sloppy look in netscape.


Anyhow, I can't use javascript code blocks explicity. I wonder if there is a jsp or struts tag library that will allow me to check the browser of the client. I realize that is kind of a contradiciton; jsp / struts is server side, while I am needing client side information. Who knows maybe there is one.

More to the point...here is the revision:



<HTML>
<BODY>


<div style="overflow:auto;height:100px;">

<table>
<thead>
<tr style='position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left"'>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody style='width:100%;max-height:100px;overflow:auto;'>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

</tbody>
</table>

</div>
</BODY>
</HTML>
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Expert Comment

by:raj3060
ID: 12115295
Does this work in netscape??
0
 
LVL 11

Accepted Solution

by:
raj3060 earned 400 total points
ID: 12115897
0
 

Author Comment

by:jbaisden
ID: 12116489
Yes it does work in netscape, but there are two seperate scroll bars: one that scrolls the table itself and another that scrolls the div. The former scroll bar is the netscape way of doing it, while the later scroll bar is the I.E. way of doing it. I am still working on the javascript to control whether or not the DIV tag gets written. If I get that working then I will work on a jsp/java struts method.

I had previously found the link you posted; however, I used some of your code to find it via google.

Any further help, hints, suggestions, or solutions are welcome.

-jbaisden
0
 

Author Comment

by:jbaisden
ID: 12128180
At last, I have a solution. I shall try to present the solution in its completeness for those seeking for a cross browser solution for static table headings. In my meandering (sp?) I have stumbled upon a couple of different ways to do this. Try to stay with me as it will be wordy, but you will not find this stuff on the same page any where on the net that I have seen unless you look for days. This solution took the correspondance on this thread, 30+ detailed browsings of web pages, conversations with other developer staff and so forth. This solution, I hope you will find, is a great deal painless than some of the others I have seen on the net, which use a whole mess of javascript. While one of my solutions is javascript, it is a very simple piece of it without the need for importing external files. Raj3060, I thank you for giving me just enough information to know what to look for. Granted, you solved half of the problem--the static heading for Internet Explorer with the need for only one DIV and one TABLE. From that, I was able to search google better to get the Netscape solution. The merging of the two took a little improvising, but that's what we do as programmers. One last note and i'll shut up and give the solution:

I want to make it clear that really the only thing I have done is merge the I.E. static heading solution with the Netscape solution. I owe a great number of people many thanks as there is no way I could have derrived this code entirely on my own, or even mostly on my own.

Here it is, in its most simplistic form:

Note: the document.write code is not working exactly how I wanted it. I was trying to send HTML code to the browser so as to generate the DIV. This solution was abandoned before being entirely finished, but I guarantee you that if you look up the syntax to insert HTML via javascript, then you will have this working. The idea is that if the user is using I.E., generate the <DIV> & </DIV> tags; otherwsie, don't. I will finish posting a revised version of this solution tomorrow as well as two other solutions that are jsp specific. I am certain this could be adapted for ASP, but I am not going to do that at this time.

<!------------------------------- BEGIN JAVASCRIPT SOLUTION -------------------------------->

<HTML>
<BODY>


<SCRIPT language="JavaScript">
      document.write('<DIV>');
       navigator.appVersion
</SCRIPT>

<SCRIPT language="JavaScript">
if (navigator.appVersion.indexOf("msie")!=-1){
document.Write('<div style='"'overflow:auto;height:30px;'"'>');
}
</SCRIPT>

<div style="overflow:auto;height:100px;">

<table>
<thead>
<tr style='position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left"'>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody style='width:100%;max-height:100px;overflow:auto;'>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

</tbody>
</table>

</div>

<SCRIPT language="JavaScript">
if (navigator.appVersion.indexOf("MSIE")!=-1){
document.Write('</DIV>');
}
</SCRIPT>

</BODY>
</HTML>


<!----------------------------------------- END JAVASCRIPT SOLUTION ----------------------->
0
 

Author Comment

by:jbaisden
ID: 12133193
Here is the correct javascript code. Copy and paste verbatim.


<!-------------------------------BEGIN CORRECT JAVASCRIPT CODE --->

<HTML>
<BODY>


<script language="Javascript">
var n=navigator.appName;
var ns=(n=="Netscape");
var ie=(n=="Microsoft Internet Explorer");
if (ie){
      document.write('<DIV style="overflow:auto;height:100px;">');
}

</script>


<table width = "100%">
<thead>
<tr style='position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left"'>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody style='width:100%;max-height:100px;overflow:auto;'>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

</tbody>
</table>



<script language="Javascript">
if (ie){
      document.write('</DIV>');
}
</script>


</BODY>
</HTML>



<!-------------------------------END CORRECT JAVASCRIPT CODE --->

Note: the following,

<script language="Javascript">
var n=navigator.appName;
var ns=(n=="Netscape");
var ie=(n=="Microsoft Internet Explorer");
if (ie){

was found on a javascript website. I apologize, but I don't remember which one.

The next version is the one that I have sided with using. This will take a bit to follow, but in the end it really isn't all that complicated. This version is jsp / struts specific. The idea is to have a java class that can hold the browser type. This would probably be in the same object that would store the user id, password, and other pertinent information. I am referring to an entity class--not the session per se; however, this entity object does get stored in the session after the user logs in. Here is the code you would use to get the browser type. Put this in your class that does the action for the login page.

userInfo ui=new userInfo();
ui.setUserId(userId);      
userAgent = request.getHeader("User-Agent");
// The above gets the browser type in a matter speaking

user = userAgent.toLowerCase();
if(user.indexOf("msie") != -1) {
     ui.setUserBrowserType("Internet Explorer");
} else if(user.indexOf("netscape") != -1) {
     ui.setUserBrowserType("Netscape");
} else {
     ui.setUserBrowserType("Other");
}

The exerpt above adapted from the code found here:
http://www.stardeveloper.com/articles/display.html?article=2001072201&page=1
in an article by Faisal Khan. The title of the article is: Creating a Browser Detection JavaBean

The class userInfo is a basic class with the attribute userBrowserType and get and set methods.

The way this works is the user goes to your website, types in the user name and password, then hits submit. Your login class is executed (you have to code for this and I don't have an example as I didn't write that part of the code for my company's app), the above code executed, and the respective page you need gets loaded. Presto, you have the browser type. The code for creating the Netscape/I.E. static header table in the jsp is as follows:


<logic:present name="userInfo">      
      <logic:equal name="userInfo" property="userBrowserType" value="Internet Explorer">
            <div style="width:100%;height:260px;overflow:auto;overflow-x|overflow-y:auto;" >
      </logic:equal>
      <logic:notEqual name="userInfo" property="userBrowserType" value="Internet Explorer">
            <div style="width:100%;" >
      </logic:notEqual>      
</logic:present>      

      <table border="1" width="100%"  cellspacing=0 align="center" >
            <thead>
            <tr style="position:relative;top:expression(this.offsetParent.scrollTop - 5);color:blue;background:white;" align="left" bordercolor="white">
                  <th nowrap="nowrap" width="15%" align="left" valign="bottom" >School Name</th>
                  <th nowrap="nowrap" width="15%" align="left" valign="bottom" >Last Name</th>
                  <th nowrap="nowrap" width="12%" align="left" valign="bottom" >First Name</th>
                  <th nowrap="nowrap" width="15%" align="left" valign="bottom" >Middle Name</th>                        
                  <th nowrap="nowrap" width="7%" align="left" valign="bottom" >Suffix</th>
                  <th nowrap="nowrap" width="7%" align="left" valign="bottom" >Gender</th>
                  <th nowrap="nowrap" width="7%" align="left" valign="bottom" >Race</th>
                  <th nowrap="nowrap" width="9%" align="left" valign="bottom" >Birth Date</th>
                  <th nowrap="nowrap" width="11%" align="left" valign="bottom" >Remove</th>
            </tr>
            </thead>
            <tbody style="width:100%;max-height:260px;overflow:auto;">
                  <logic:iterate id="student" name="studentList" scope="request" type="gov.wi.state.dpi.wsn.Entity.TmpStudent">       
                        <tr  align="center" valign="top" >      
                              <td  width="15%" align="left" valign="top" >Some Data</td>
                              <td  width="15%" align="left" valign="top" >Some Data</td>
                              <td  width="12%" align="left" valign="top" >Some Data</td>
                              <td  width="15%" align="left" valign="top" >Some Data</td>
                              <td nowrap="nowrap" width="7%" align="left" valign="top" >Some Data</td>
                              <td  width="7%" align="left" valign="top" >Some Data</td>
                              <td  width="7%" align="left" valign="top" >Some Data</td>
                              <td  width="9%" align="left" valign="top" >Some Data</td>
                              <td  width="11%" align="left" valign="top" >Some Data</td>
                        </tr>
                  </logic:iterate>
            </tbody>            
      </TABLE>      
</div>

The html/jsp page opened with the following statements:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<html:html>

I think that should be enough to reproduce this solution as you see fit. If you don't know how to make the login page try googling for jsp, struts, action page or something of that nature. I know that the class that gets the userInfo is executed when the user hits the submit button on the login page. Anyhow, if I say much more my ignorance in this matter will become apparent (as if it hasn't already) so I shall hold off.


<!---------------------------------------- NEXT SOLUTION JSP 2 ------------------------>

This solution is similar to the one above, a bit sloppier, and I never got it to work because it served as a stepping stone to the one above. On the other hand, I believe this solution is still workabove provided you are willing to pick up where I left off.

Firstly create a class called detectBrowser. The code is below. It was taken from the stardeveloper site referenced above and is by the same author and in the same article.

/*
 * Used by permission.
 *
 * Code from: http://www.stardeveloper.com/articles/display.html?article=2001072201&page=1
 *
 * Opening paragraph of article is below.
 *
 * Creating a Browser Detection JavaBean
by Faisal Khan.

Overview
In this article we will build a browser detection JavaBean which as the
name suggests will try to detect your browser and display a useful message.
You can use this bean as such or improve it to your liking. It is a very
simple and light weight bean and should not take much memory on your server.
You can use it on your site to detect user browser and render appropriate
HTML to the user. Since different browsers don't support all the HTML and
CSS features ( Netscape 4 being the main culprit ), this JavaBean can be
of lot of help to you.

 */
package your.company.path;

import java.io.Serializable;
import javax.servlet.http.HttpServletRequest;

public final class detectBrowser implements Serializable {

      public HttpServletRequest request = null;
      public String useragent = null;
      public boolean netEnabled = false;
      public boolean ie = false;
      public boolean ns6 = false;
      public boolean ns4 = false;

      public void setRequest(HttpServletRequest req) {
            request = req;
            useragent = request.getHeader("User-Agent");
            String user = useragent.toLowerCase();
            if(user.indexOf("msie") != -1) {
                  ie = true;
            } else if(user.indexOf("netscape6") != -1) {
                  ns6 = true;
            } else if(user.indexOf("mozilla") != -1) {
                  ns4 = true;
            }

            if(user.indexOf(".net clr") != -1)
                  netEnabled = true;
      }

      public String getUseragent() {
            return useragent;
      }

      public boolean isNetEnabled() {
            return netEnabled;
      }

      public boolean getIE(){
            return ie;
      }
      
      public boolean getns6() {
            return ns6;
      }      
      
      public boolean isIE() {
            return ie;
      }

      public boolean isNS6() {
            return ns6;
      }

      public boolean isNS4() {
            return ns4;
      }
}


Put the following in the header of each page that you wish to check the user's browser:


<!-- BROWSER DETECTION TEST -->
      <jsp:useBean id="db" class="your.company.path.detectBrowser"
            scope="session">
            <jsp:setProperty name="db" property="request" value="<%= request %>" />
      </jsp:useBean>
<!-- END BROWSER DETECTION TEST -->

And this is the cross browser static header table code:

<% if(db.isIE()) { %>
      <div style="width:100%;height:260px;overflow:auto;overflow-x|overflow-y:auto;" class="noprint">
<% }
else {%>
      <div style="width:100%;" class="noprint">
<% } %>


      <table border="1" width="100%"  cellspacing=0 align="center" >
            <thead>
            <tr style="position:relative;top:expression(this.offsetParent.scrollTop - 5);color:blue;background:white;" align="left" bordercolor="white">
                  <th nowrap="nowrap" width="15%" align="left" valign="bottom" >School Name</th>
                  <th nowrap="nowrap" width="15%" align="left" valign="bottom" >Last Name</th>
                  <th nowrap="nowrap" width="12%" align="left" valign="bottom" >First Name</th>
                  <th nowrap="nowrap" width="15%" align="left" valign="bottom" >Middle Name</th>                        
                  <th nowrap="nowrap" width="7%" align="left" valign="bottom" >Suffix</th>
                  <th nowrap="nowrap" width="7%" align="left" valign="bottom" >Gender</th>
                  <th nowrap="nowrap" width="7%" align="left" valign="bottom" >Race</th>
                  <th nowrap="nowrap" width="9%" align="left" valign="bottom" >Birth Date</th>
                  <th nowrap="nowrap" width="11%" align="left" valign="bottom" >Remove</th>
            </tr>
            </thead>
            <tbody style="width:100%;max-height:260px;overflow:auto;">
                  <logic:iterate id="student" name="studentList" scope="request" type="gov.wi.state.dpi.wsn.Entity.TmpStudent">       
                        <tr  align="center" valign="top" >      
                              <td  width="15%" align="left" valign="top" >Some Data</td>
                              <td  width="15%" align="left" valign="top" >Some Data</td>
                              <td  width="12%" align="left" valign="top" >Some Data</td>
                              <td  width="15%" align="left" valign="top" >Some Data</td>
                              <td nowrap="nowrap" width="7%" align="left" valign="top" >Some Data</td>
                              <td  width="7%" align="left" valign="top" >Some Data</td>
                              <td  width="7%" align="left" valign="top" >Some Data</td>
                              <td  width="9%" align="left" valign="top" >Some Data</td>
                              <td  width="11%" align="left" valign="top" >Some Data</td>
                        </tr>
                  </logic:iterate>
            </tbody>            
      </TABLE>      
</div>

I abandoned this method because of the use of the <% %> as our coding standards did not allow for it; however, I was working on some code to try and replace most of the <% %> with struts logic tags. This is the part that I could not get working. The code above should work as is provided you follow the directions and mesh that with a little improvisation. The part I was working with is below.

<logic:present name="db" >
      <logic:equal name="db" property="<% db.getIE() %>" value="true" scope="session" >
            blah
      </logic:equal>            
</logic:present>


And there you have it. The javascript solution is the easiest; however, the jsp / struts solution is pretty nice too, I think. I really hope this helps. This is the result of 3 or 4 days of research which, in the end, has indeed shortened my work load.

Take care and God bless. Raj, thanks again for all your help!

jbaisden
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12133285
Nice work jbaisden.
Thanks
0
 

Expert Comment

by:mdowden
ID: 12745680
I'd been looking for this solution also, all over the Web. I was excited to see a relatively simply and easy fix......however... I tried the version bleow and found that when viewing in IE, regardless of resolution, if you moved the browser scrollbar (not the scrollable table), the headers went out of kilter. Work perfectly fine is every other browser besides IE.

Refer to: http://www.pavetechnologyco.com/design/coaxial/coax_productindex_test.html

<!-------------------------------BEGIN CORRECT JAVASCRIPT CODE --->

<HTML>
<BODY>


<script language="Javascript">
var n=navigator.appName;
var ns=(n=="Netscape");
var ie=(n=="Microsoft Internet Explorer");
if (ie){
     document.write('<DIV style="overflow:auto;height:100px;">');
}

</script>


<table width = "100%">
<thead>
<tr style='position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;" align="left"'>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody style='width:100%;max-height:100px;overflow:auto;'>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

</tbody>
</table>



<script language="Javascript">
if (ie){
     document.write('</DIV>');
}
</script>


</BODY>
</HTML>



<!-------------------------------END CORRECT JAVASCRIPT CODE --->
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12754587
mdowden,
I have the solution for your problem. You need to open a new question. As this question is already closed, I can not post the solution here.
Also when you post the question, please give a link on this thread.
Thanks
0
 

Expert Comment

by:mdowden
ID: 12754802
This question has been moved to
http://www.experts-exchange.com/Web/Q_21231879.html

as "How do I maintain a static table header in a scrollable table in Internet Explorer"
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12760615
I'll be posting something in the morning
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now