...

View Full Version : Table column heading problem



jerry62704
07-10-2008, 10:20 PM
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):

<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:


<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.

jerry62704
07-11-2008, 02:19 PM
Guess this was tougher than I had thought.

jerry62704
07-11-2008, 07:22 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum