本文发表在 rolia.net 枫下论坛I'm building up a table with fixed headers. After I googled around and got some very helpful samples, it seemed I've already achieved the goal. However, there's one problem I can't fix, that is, if the content of a table cell is a drop-down list (<select>), the fixed table header won't work and will go under the cell ( a table header is always supposed to stay on the top and when you scroll up and down, the non-header cells should go under the header).
Here's the source code for the HTML
-----------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>TEST</title>
<link href="StyleSheet.css" rel=styleSheet type=text/css>
</head>
<body>
<STYLE type=text/css>
THEAD.fixedHeader TR {
POSITION: relative; vertical-align:top;border-top: black 1px solid;
background-color: #89AA89;
font-family: "Arial","Helvetica","sans-serif", "Verdana";
font-size: 8pt;
font-weight: bold;
color: white
}
</STYLE>
<form >
<STYLE type=text/css>
DIV.tableContainer1 {
CLEAR: both; OVERFLOW: auto; text-align:left; WIDTH: 750px;HEIGHT: 100px;
border-style: solid;
border-bottom: black 1px solid;
border-left: black 1px solid;
border-right: black 1px solid;
border-top: black 1px solid;
}
DIV.tableContainer1 TABLE {
FLOAT: left; WIDTH: 733px;
}</STYLE>
<table width="750" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><font class="sectionTitle">Tables</font></td>
<td align="right"><font class="tips" style="cursor: default;">Tips</font>
</td>
</tr>
</table>
<DIV class="tableContainer1">
<table border=0 cellpadding="1" cellspacing="0">
<THEAD class=fixedHeader>
<tr>
<td class="formLabel02" width=25> </td>
<td class="formLabel02" width=600>Table Name</td>
<td class="formLabel02" width=100>Format</td>
</tr>
</THEAD>
<TBODY>
<tr>
<td class="formField01" align="center" width="25">
99
</td>
<td class="formField01" width="600">
</td>
<td class="formField01" width="80">AAAAAAAAAAAAAA
</td>
</tr>
<tr>
<td class="formField01" align="center" width="25">
100
</td>
<td class="formField01" width="600">
11
</td>
<td class="formField01" width="80">
<select name="ProdGrpSubmissionSettingView.PROD_SUB_SET_FILE_TYPE_ID_1" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</select>
</td>
</tr>
<tr>
<td class="formField01" align="center" width="25">
22
</td>
<td class="formField01" width="600">
</td>
<td class="formField01" width="80">
<select name="ProdGrpSubmissionSettingView.PROD_SUB_SET_FILE_TYPE_ID_2" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</select>
</td>
</tr>
<tr>
<td class="formField01" align="center" width="25">
33
</td>
<td class="formField01" width="600">
</td>
<td class="formField01" width="80">
<SELECT name="select_test__3" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</SELECT>
</td>
</tr>
<tr>
<td class="formField01" align="center" width="25">
44
</td>
<td class="formField01" width="600">
</td>
<td class="formField01" width="80">
<select name="select_test__4" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</select>
</td>
</tr>
<tr>
<td class="formField01" align="center" width="25">
55
</td>
<td class="formField01" width="600">
</td>
<td class="formField01" width="80">
<select name="select_test__4" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</select>
</td>
</tr>
</TBODY>
</table>
</DIV>
</form>
</body>
</html>更多精彩文章及讨论,请光临枫下论坛 rolia.net