|
Posted by nkparimi on December 15, 2005, 5:10 pm
Please log in for more thread options
Hi,
Here's what I'm trying: given an html table, to freeze the column
headers and/or left column in IE. I understand that this is possible
thru style sheets in IE, as suggested in the following:
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
http://www.adp-gmbh.ch/web/css/expression.html
However, I've found that these methods donot work on a column that has
dropdowns in it (i.e. select tag with option tags in it). Does anyone
have suggestions on how to get this working for dropdowns?
thanks
Nagender
Here's a snippet that I have:
<html>
<head>
<title>Some Title</title>
<style>
table {
border-collapse : collapse;
table-layout : fixed;
}
td, th {
background-color: #aaaaaa;
border-right : 1px solid #ffffff;
color : #ffffff;
width : 100px;
text-align : center;
}
th.locked_both {
background-color: #88ff88;
font-weight : bold;
top :
expression(document.getElementById('table_container').scrollTop);
border-left : 1px solid #ffffff;
position : relative;
z-index : 1
}
th.locked_top {
background-color: #88ff88;
font-weight : bold;
top :
expression(document.getElementById('table_container').scrollTop);
position : relative;
z-index : 1
}
#table_container {
width : 300px;
height : 100px;
overflow : scroll;
}
</style>
</head>
<body>
<div id='table_container'>
<table>
<thead>
<tr>
<th class='locked_top'>Number</th>
<th class='locked_top' >English</th>
<th class='locked_top' >French </th>
<th class='locked_top' >German </th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td >one</td>
<td >un</td>
<td>
<SELECT>
<OPTION VALUE="hello">hello</OPTION>
<OPTION VALUE="world">world</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td >2</td>
<td >two</td>
<td >deux</td>
<td>
<SELECT>
<OPTION VALUE="hello">hello</OPTION>
<OPTION VALUE="world">world</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td >3</td>
<td >three</td>
<td >trois</td>
<td>
<SELECT>
<OPTION VALUE="hello">hello</OPTION>
<OPTION VALUE="world">world</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td >4</td>
<td >four</td>
<td >quattre</td>
<td>
<SELECT>
<OPTION VALUE="hello">hello</OPTION>
<OPTION VALUE="world">world</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td >5</td>
<td >five</td>
<td >penta</td>
<td>
<SELECT>
<OPTION VALUE="hello">hello</OPTION>
<OPTION VALUE="world">world</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td >6</td>
<td >six</td>
<td >hex</td>
<td>
<SELECT>
<OPTION VALUE="hello">hello</OPTION>
<OPTION VALUE="world">world</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
| 
XML Sitemap