Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Question Table column heading problem

    I'm getting a page that has many tables (don't blame me) with at least one a proper one. That table of data has a heading that doesn't scroll. The data below that does scroll and that is where I have my question. Why does it scroll below the headers?

    Table (please ignore the JSP/struts stuff as it doesn't affect the issue):
    Code:
    	<body>
    		<tiles:insert page="/pages/common/header.jsp" flush="true"/>
    			<table border="1px" 
    				   align="center" 
    				   cellpadding="1" 
    				   cellspacing="1">
    				<tr>
    					<td>
    						<div id="recepientListHolder">
    							<table id="recepientListTable" 
    								   border="0" 
    								   cellspacing="1" 
    								   cellpadding="3" 
    								   align="left">
    								<thead>
    									<tr class="noScroll tableHeader">
    										<td colspan="4"
    											class="tableHeader"> 
    											<table border="0" 
    												   cellspacing="0" 
    												   cellpadding="0" 
    												   align="left"> 
    												<tr class="tableHeader">
    													<td width="100px">
    														<img border="0" src="<bean:write name="basePath"/>/images/chicago/BuckinghamFountain2330772-Th.jpg"
    															width="130px" height="75px" alt="">
    													</td>
    													<td align="center" 
    														valign="baseline" 
    														width="300px">
    														<h1 style="white-space: nowrap; margin: 0px 5px 5px 5px">
    															&nbsp;
    													        <logic:equal name="recepientListType" value="pending" >
    													        	<bean:message key="recepientList.pending.title" />
    													        </logic:equal>
    													        <logic:equal name="recepientListType" value="completed" >
    													        	<bean:message key="recepientList.completed.title" />
    													        </logic:equal>
    													        &nbsp;
    														</h1>
    													</td>
    												</tr>
    											</table>
    										</td>
    									</tr>
    									<tr class="noScroll"> 
    										<td class="noScroll tableHeader">
    											<bean:message key="recepientList.lastName" />
    										</td>
    										<td class="noScroll tableHeader">
    											<bean:message key="recepientList.firstName" />
    										</td>
    										<td class="noScroll tableHeader">
    											<bean:message key="recepientList.agencyClientId" />
    										</td>
    										<td class="noScroll tableHeader">
    											<bean:message key="recepientList.submissionDate" />
    										</td>
    									</tr>
    								</thead>
    								<tbody>
    									<logic:iterate name="recepientList"
    									               id="recepientList"
    									               scope="request"
    									               type="gov.dhs.il.rinapp.dtos.RecepientManagerDTO"> 
    										<tr>
    											<td class="recepientList">
    												<html:link forward="manageRecepients">
    													<html:param name="recepientId">
    														<bean:write name="recepientList" 
    																	property="recepientId"/>
    													</html:param>
    													<html:param name="useRecepientId" value="true"/>									
    														<bean:write name="recepientList" 
    																	property="lastName"/>
    												</html:link>
    											</td>
    											<td class="recepientList">
    												<bean:write name="recepientList" 
    															property="firstName"/>
    											</td>
    											<td class="recepientList">
    												<bean:write name="recepientList" 
    															property="agencyClientId"/>
    											</td>
    											<td class="recepientList">
    												<bean:write name="recepientList" 
    															property="currentTimeStamp"/>
    											</td>
    										</tr>
    									</logic:iterate>
    								</tbody>
    							</table>
    						</div>
    					</td>
    				</tr>
    The column headings seem to be controlled by css with this:

    Code:
    <style>
    
    .actionErrors {
    	
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			75%;
        font-weight: 		bold;
    	color: 				red;
    	margins: 			10px 10px 10px 10px;
    }
    
    .actionMessages {
    	
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			75%;
        font-weight: 		bold;
    	color: 				gray;
    	margins: 			10px 10px 10px 10px;
    }
    
    .tableHeader {
    
    	border: 			1px solid #9F9F9F; /*#9F9F9F; #6BADE3 ;*/
    	background-color:  	#eaeac8;
    	margins: 			10px 10px 10px 10px;
        white-space: 		nowrap;
    }
    
    .noScrollTopRow {
    
    	/* background-color: buttonface ; /* #D5D5D5; #335588; */
    	z-index: 			3;
    	position: 			relative;
    	top: 				expression(this.offsetParent.scrollTop);
    }
    
    .noScroll {
    
    	/* background-color: buttonface ; /* #D5D5D5; #335588; */
    	position: 			relative;
    	top: 				expression(this.offsetParent.scrollTop);
    	z-index: 			2;
    }
    
    #recepientListHolder {
    
    	width: 				expression(document.getElementById("recepientListTable").offsetWidth + 20);
    	height: 			325px;
    	overflow: 			auto;	
    }
    
    #recepientListTable {
    
    	/* width: 450px */; 
    }
    
    .recepientList {
    	
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			80%;
        font-weight: 		normal;
        white-space: 		nowrap;
        margins: 			15px 15px 15px 15px;
    }
    
    #footerHolder {
    
    	position:			relative; 
    	top: 				10px; 
    	left: 				10px;
    }
    
    .menuHeader {
    
    	background-color:  ; /*#D76D10; */
    	margins: 			10px 10px 10px 10px;
        white-space: 		nowrap;
        font-color: 		white;
    }
    
    .menuHeaderText {
    
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			90%;
    	font-weight: 		bold;
    	position: 			absolute; 
    	top: 				7px; 
    	left: 				expression((this.offsetParent.offsetWidth / 2) - 60);
    	color: 				white;
    }
    
    .menuPosition {
    
    	position: 			absolute; 
    	top: 				40px; 
    	left: 				expression((this.offsetParent.offsetWidth / 2) - 75);
    	height: 			25px;
    	display: 			block;
    }
    
    .menuList {
    	
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			90%;
        font-weight: 		bold;
        white-space: 		nowrap;
        align: 				left;
        margins: 			15px 15px 15px 15px;
        color: 				white;
    }
    
    #navigationTable {
    
    	/* height: 25px; */
    }
    
    body {
    	background-color: 	white
    }
    
    h1 {
    	
    	font-family: 		Times New Roman;
        font-size: 			225%;
        font-weight: 		bold;
        color:				#000066;
        margins: 			15px 15px 15px 15px;
    }
    
    .header2 {
    	
    	font-family: 		Times New Roman;
        font-size: 			175%;
        font-weight: 		bold;
        margins: 			15px 15px 0px 15px;
        color: 				#000066;
    }
    
    td {
    	
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			70%;
        font-weight: 		bold;
        white-space: 		nowrap;
        color:				#000066
    }
    
    a:hover {
        font-weight: 		bold;
    }
    
    a:visited, a:link, a:active {
    	
    	font-family: 		Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 			100%;
        /*font-weight: bold;*/
        white-space: 		nowrap;
        margins: 			10px 10px 10px 10px;
        color: 				black;
        text-decoration: 	none;
    }
    
    </style>
    The "noScroll" has the top set to an expression and the headings will scroll without it. But I can't see how the data scrolls below the headings and not under it as it does in the test case I made to try to understand it.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Guess this was tougher than I had thought.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I was seeing the data scroll under the column headings and taking the caption with it. This resulted in a line of scrolling data, the heading and finally the rest of the scrolling data. I used the align attribute to move the caption to the bottom of the page and colored the headings so you can't see it scroll underneath.

    How do I position the caption to the bottom of the table (or anywhere) not using the align attribute?
    Last edited by jerry62704; 07-11-2008 at 11:24 PM.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •