I have a table where the header is fixed and in my table I have a dropdown list that contains let’s say a list of fruit and then some other fields that are text. When I scroll, all fields that are text scroll behind the header of the table EXCEPT for the drop-down list which scrolls in front of the table header.
It seems like this should be able to work and I want it to work, I just can’t figure out what I am doing wrong. 
Thanks Paul, I appreciate you looking at this! You are great! 
Wow, you did it! I really appreciate this! I will work with this and get it working in my application. I really appreciate your help!
Hi you are confusing me a little here as that seems to be the same code that you had before - more or less.
This is what I want you to do so that I can help you:
Run your code locally in your browser and then hit “View source” from the browser controls and then copy and paste the resulting html here. If there is sensitive information in the html then edit it out but don’t break the structure.
Copy all your css and paste it here also.
Specify what browsers you are supporting
Unless you can do that for me (or provide a link to the page) then I can’t really help properly but just point you to my working example in post #7
I’ve put up a live example in case you need to refer to it.
Yes my example in post #7 is the only working example of this method that works without scripts but does have limitations on the header alignment.
Your version only works in IE6 because it is scripted with expressions which will fail if js is turned off. Only Firefox scrolls the tbody so you are losing all the other browsers such as safari and chrome also.
You’ll need to create a working example is html/css (and no server side code) if you want us to solve this for you.
I got it somewhere off of the internet, I don’t remember where.
It works on my IE browser, but I am only running version 6 as required by our company.
Is there different code that I should use for the fixed table headers that will fix this problem?
Hi,
Well Ive tried my best but I can’t get anything to work. I even added the jquery iframe plugin but to no avail. It is basically working with the iframe plugin but once the page is scrolled it stops working.
I just think that with the method you have chosen this is not going to work. I’ve spent a few hours on it now and usually a solution falls into place if there is one.
I think your best bet would be to use the method I showed in post#7 which is working fine with selects in IE6 due to the different way the fixed header is handled. I realise it will be a bit of a job to convert but I can’t see another solution at the moment.
You could probably find someone to write some JS that hides the select when it is level with the header but I don’t think it would make for a nice effect.
Sorry I couldn’t get it to work but maybe someone else with a bit more time can have a go now.
I just put some of your data into my example if it helps you and the basics are like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
margin:0 0 1em
}
table#data p {
margin:0;
}
.wrap {
margin:50px 0 0 2%;
width:800px;
float:left;
position:relative;
height:300px;
overflow:hidden;
padding:50px 0 0;
background:#fffccc;
border:1px solid #000;
}
.inner {
width:100%;
height:300px;
overflow:auto;
}
table#data {
width:100%;
margin:0 0 0 -1px;
border-collapse:collapse;
}
#data td {
padding:5px;
border:1px solid #000;
text-align:center;
background:yellow;
}
#data tfoot th, #data thead th {
font-weight:bold;
text-align:left;
border:1px solid #000;
padding:0 3px 0 3px;
background:#ffffcc;
}
#data thead th {
border:none;
}
#data thead tr p {
position:absolute;
top:0;
width:100%;
border-bottom:1px solid #000;
height:21px;
margin:0 0 0 -3px;
padding:0 3px 3px 25px;
}
#data thead tr.secondrow p {
top:25px;
}
.last {
padding-right:15px!important;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.inner {overflow-x:hidden}
</style>
<![endif]-->
</head>
<body>
<form name="form1" method="post" action="">
<div class="wrap">
<div class="inner">
<table id="data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><p>Delete Record</p></th>
<th><p>Observation Date</p></th>
<th><p>Shift</p></th>
<th class="last" colspan="4"><p>Hand Hygiene BEFORE Touching Patient</p></th>
</tr>
<tr class="secondrow">
<th><p> </p></th>
<th><p> </p></th>
<th><p> </p></th>
<th><p>Yes HR</p></th>
<th><p>Yes HW</p></th>
<th><p>No</p></th>
<th class="last" colspan="4"><p>N/A</p></th>
</tr>
</thead>
<tfoot>
<tr>
<th><p>Delete Record</p></th>
<th><p>Observation Date</p></th>
<th><p>Shift</p></th>
<th class="last" colspan="4"><p>Hand Hygiene BEFORE Touching Patient</p></th>
</tr>
<tr class="secondrow">
<th><p> </p></th>
<th><p> </p></th>
<th><p> </p></th>
<th><p>Yes HR</p></th>
<th><p>Yes HW</p></th>
<th><p>No</p></th>
<th class="last" colspan="4"><p>N/A</p></th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
<tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr> <tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr> <tr>
<td><input type="checkbox" name="deleteRow_#nDetailID#"></td>
<td><input type="text" name="#cFieldName#" value="06/11/2010" maxlength="10"size="6">
<input type="hidden" name="txt_shift"></td>
<td><select name="txt_Shift_1" id="txt_Shift_1">
<option value="0">Select Shift</option>
<option value="D" >Day</option>
<option value="E">Evening</option>
<option value="N"> Night</option>
</select></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="1" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="2" /></td>
<td><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="3" /></td>
<td class="last"><input name="txt_HHB_1" id="txt_HHB_1" type="radio" value="4" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
Just copy that code and run it in your browser to see what it looks like.
The only downside to this method is that the header data must be reproduced in the table footer and automatic centering of the header row is not possible but approximated.
Hope it helps anyway.
Thank you in advance for your help.
I am going to send you the code via email, I can’t paste it in here, too long. I would send you the link but I am on a local server. You can post your reply here if you want so others can see your answer in case they are having issues.
I replaced my code in my script using what you have above and my headers are not fixed.
<link rel="stylesheet" href="basic.css" type="text/css">
<style type="text/css">
div.tableContainer {
width: 90%; /* table width will be 99% of this*/
height: 320px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}
table {
width: 97%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
border-spacing: 0px;
background-color: transparent;
}
table>tbody {
overflow: auto;
height: 280px;
overflow-x: hidden;
}
table>tbody tr {
height: auto;
}
table>thead tr {
position:relative;
top: 0px;/*expression(offsetParent.scrollTop); IE5+ only*/
}
</style>
<head>
<title>Marathon Time Calculator</title>
</head>
<body>
<cfform name="frmMain"
action="#CGI.SCRIPT_NAME#"
method="post">
<div class="tableContainer">
<table cellspacing="0" cellpadding="2">
<!--- Create headers for top of table and answers to questions --->
<thead>
<tr>
<th valign="bottom" class="TextRightWithBorder" rowspan="2"><div align="center">Delete Record</div></th>
<th valign="bottom" class="TextRightWithBorder" rowspan="2"><div align="center">Observation Date</div></th>
<th valign="bottom" class="TextRightWithBorder" rowspan="2"><div align="center">Shift</div></th>
<th valign="bottom" class="TextRightWithBorder" colspan="4"><div align="center">Hand Hygiene BEFORE Touching Patient</div></th>
</tr><br>
</thead>
<thead>
<tr>
<th valign="bottom" rowspan="2" ><div align="center"> </div></th>
<th valign="bottom" rowspan="2"><div align="center"> </div></th>
<th valign="bottom" rowspan="2"><div align="center"> </div></th>
<th valign="bottom" rowspan="2"><div align="center"> </div></th>
<th class="TextRightWithBorder" title="Alcohol Hand Rub"><div align="center">Yes HR</div></th>
<th class="TextRightWithBorder" title="Hand Wash"><div align="center">Yes HW</div></th>
<th class="TextRightWithBorder"><div align="center">No</div></th>
<th class="TextRightWithBorder"><div align="center">N/A</div></th>
</tr>
</thead>
<cfloop index="nRowNum" from="1" to="20">
<tbody>
<tr>
<!--- Delete --->
<td class="CellWithBorder">
<div align="center">
<input type="checkbox"
name="deleteRow_#nDetailID#">
</div>
</td>
<!--- Observation Date --->
<cfset cFieldName = 'txt_ObsDate_' & tostring(nRowNum)>
<td class="CellWithBorder" nowrap><div align="left">
<input type="text"
name="#cFieldName#"
value="06/11/2010"
maxlength="10"
size="6">
</div>
</td>
<!--- Shift Worked --->
<cfset cFieldName = 'txt_Shift_' & tostring(nRowNum)>
<input type="hidden" name="txt_shift">
<td class="CellWithBorder">
<cfselect name="#cFieldName#">
<option value="0">Select Shift</option>
<option value="D" >Day
<option value="E">Evening
<option value="N"> Night
</cfselect>
</td>
<!--- Hand Hygiene Before --->
<cfset cFieldName = 'txt_HHB_' & tostring(nRowNum)>
<td class="CellWithBorderLeft" title="Yes Alcohol Hand Rub">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="1">
</div>
</td>
<td class="CellWithBorderCenter" title="Yes Hand Wash">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="2">
</div>
</td>
<td class="CellWithBorderCenter">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="3">
</div>
</td>
<td class="CellWithBorderRight">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="4">
</div>
</td>
</tr>
</tbody>
</cfloop>
</table>
</div>
</cfform>
</body>
Hi,
Could you post the html without the coldfusion code in place please?
Just run the page locally and then select view source from the browser window.We only want html and css and not your serverside code otherwise we can’t build a working example of your page.
I have a fixed header with scrolling table that works with selects in ie6-8 and other browsers which you may be able to copy instead.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
margin:0 0 1em
}
table p {
margin :0
}
.wrap {
margin:50px 0 0 2%;
width:95%;
float:left;
position:relative;
height:200px;
overflow:hidden;
padding:25px 0 0;
background:#fffccc;
border:1px solid #000;
}
.inner {
width:100%;
height:200px;
overflow:auto;
}
table {
width:100%;
margin:0 0 0 -1px;
border-collapse:collapse;
}
td {
padding:5px;
border:1px solid #000;
text-align:center;
background:yellow;
}
tfoot th, thead th {
font-weight:bold;
text-align:left;
border:1px solid #000;
padding:0 3px 0 5px;
background:#ffffcc;
}
thead th {
border:none;
}
thead tr p {
position:absolute;
top:0;
width:100%;
border-bottom:1px solid #000;
border-left:2px solid #000;
height:21px;
margin-left:-6px;
padding:0 3px 3px;
}
.last {
padding-right:15px!important;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.inner {overflow-x:hidden}
</style>
<![endif]-->
</head>
<body>
<h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
<p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
<form name="form1" method="post" action="">
<div class="wrap">
<div class="inner">
<table id="data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><p>Jan</p></th>
<th><p>Feb</p></th>
<th><p>Mar</p></th>
<th><p>Apr</p></th>
<th><p>May</p></th>
<th><p>Jun</p></th>
<th><p>Jul</p></th>
<th><p>Aug</p></th>
<th><p>September</p></th>
<th><p>Oct</p></th>
<th><p>Nov</p></th>
<th class="last"><p>Dec</p></th>
</tr>
</thead>
<tfoot>
<tr>
<th><p>Jan</p></th>
<th><p>Feb</p></th>
<th><p>Mar</p></th>
<th><p>Apr</p></th>
<th><p>May</p></th>
<th><p>Jun</p></th>
<th><p>Jul</p></th>
<th><p>Aug</p></th>
<th><p>September</p></th>
<th><p>Oct</p></th>
<th><p>Nov</p></th>
<th class="last"><p>Dec</p></th>
</tr>
</tfoot>
<tbody>
<tr>
<td><select name="test" id="test">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select></td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class="last">3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td></td>
<td>1</td>
<td><select name="test" id="test">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select></td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class="last">7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td><select name="test" id="test">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select></td>
<td class="last">6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class="last">6</td>
</tr>
<tr>
<td>2</td>
<td>3 with more data</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>8</td>
<td class="last">6</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td class="last">3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>23</td>
<td class="last">6</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>2</td>
<td>67</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td class="last">4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>65</td>
<td class="last">4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>13</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td class="last">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
Hi,
Can you supply some code or a link to the page?
It all depends on how this is set up so we’d need to see what you are working with.
Sounds like the dropdown list has a higher z-index then the table header :). We would need to see a page to confirm though. Or at the least, HTML and CSS.
<link rel="stylesheet" href="basic.css" type="text/css">
<style type="text/css">
div.tableContainer {
width: 150%; /* table width will be 99% of this*/
height: 425px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}
statictable {
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #f7f7f7;
}
table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 250px;
overflow-x: hidden;
}
thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}
thead td, thead th {
text-align: center;
font-size: 14px;
background-color: oldlace;
color: steelblue;
font-weight: bold;
border-top: solid 1px #d8d8d8;
}
statictd {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: right;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
table tfoot tr { /*idea of Renato Cherullo to help IE*/
position: relative;
/*overflow-x: hidden;*/
top: expression(parentNode.parentNode.offsetHeight >=
offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
}
tfoot td {
text-align: center;
font-size: 11px;
font-weight: bold;
background-color: papayawhip;
color: steelblue;
border-top: solid 1px slategray;
}
td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
</style>
<!-- print style sheet -->
<style type="text/css" media="print">
div.tableContainer {overflow: visible; }
table>tbody {overflow: visible; }
td {height: 14pt;} /*adds control for test purposes*/
thead td {font-size: 11pt; }
tfoot td {
text-align: center;
font-size: 9pt;
border-bottom: solid 1px slategray;
}
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
thead th, thead td {position: static; }
thead tr {position: static; } /*prevent problem if print after scrolling table*/
table tfoot tr { position: static; }
</style>
<head>
<title>Marathon Time Calculator</title>
</head>
<body>
<cfform name="frmMain"
action="#CGI.SCRIPT_NAME#"
method="post">
<div class="tableContainer">
<table cellspacing="0" cellpadding="2">
<!--- Create headers for top of table and answers to questions --->
<thead>
<tr>
<th valign="bottom" class="TextRightWithBorder" rowspan="2"><div align="center">Delete Record</div></th>
<th valign="bottom" class="TextRightWithBorder" rowspan="2"><div align="center">Observation Date</div></th>
<th valign="bottom" class="TextRightWithBorder" rowspan="2"><div align="center">Shift</div></th>
<th valign="bottom" class="TextRightWithBorder" colspan="4"><div align="center">Hand Hygiene BEFORE Touching Patient</div></th>
</tr><br>
</thead>
<thead>
<tr>
<th valign="bottom" rowspan="2" ><div align="center"> </div></th>
<th valign="bottom" rowspan="2"><div align="center"> </div></th>
<th valign="bottom" rowspan="2"><div align="center"> </div></th>
<th valign="bottom" rowspan="2"><div align="center"> </div></th>
<th class="TextRightWithBorder" title="Alcohol Hand Rub"><div align="center">Yes HR</div></th>
<th class="TextRightWithBorder" title="Hand Wash"><div align="center">Yes HW</div></th>
<th class="TextRightWithBorder"><div align="center">No</div></th>
<th class="TextRightWithBorder"><div align="center">N/A</div></th>
</tr>
</thead>
<cfloop index="nRowNum" from="1" to="20">
<tbody>
<tr>
<!--- Delete --->
<td class="CellWithBorder">
<div align="center">
<input type="checkbox"
name="deleteRow_#nDetailID#">
</div>
</td>
<!--- Observation Date --->
<cfset cFieldName = 'txt_ObsDate_' & tostring(nRowNum)>
<td class="CellWithBorder" nowrap><div align="left">
<input type="text"
name="#cFieldName#"
value="06/11/2010"
maxlength="10"
size="6">
</div>
</td>
<!--- Shift Worked --->
<cfset cFieldName = 'txt_Shift_' & tostring(nRowNum)>
<input type="hidden" name="txt_shift">
<td class="CellWithBorder">
<div style="position:relative; z-index:999;">
<cfselect name="#cFieldName#">
<option value="0">Select Shift</option>
<option value="D" >Day
<option value="E">Evening
<option value="N"> Night
</cfselect>
</div>
</td>
<!--- Hand Hygiene Before --->
<cfset cFieldName = 'txt_HHB_' & tostring(nRowNum)>
<td class="CellWithBorderLeft" title="Yes Alcohol Hand Rub">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="1">
</div>
</td>
<td class="CellWithBorderCenter" title="Yes Hand Wash">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="2">
</div>
</td>
<td class="CellWithBorderCenter">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="3">
</div>
</td>
<td class="CellWithBorderRight">
<div align="center">
<cfinput type="Radio" name="#cFieldName#" value="4">
</div>
</td>
</tr>
</tbody>
</cfloop>
</table>
</div>
</cfform>
</body>
Yes I am talking about the <select> and <option> in the code. That is a real bummer that I can’t get it to work.
What is the iframe shimming technique? I am very new to this. Thanks! 
Hi, if you are talking dropdown, as in <select> and <option> then it’s impossible to get that below something, because it’s a window pane object and as a result it has an infinite z-index.
I don’t see any other dropdown code (in the HTML or CSS :))
You could use an iframe shimming technique though if you really want
Where did you get that fixed table header code from as it doesn’t seem to be working properly in any browser? The tbody overflow method only works in Firefox anyway so is not a viable solution.
ok