Click to See Complete Forum and Search --> : Lock table header and first column


KalyanRaj
05-14-2007, 08:43 AM
Hello all,

I'm trying to freeze the table header along with the first column but when scrolling it is not showing the table header.

Below is the code i've worked out so far. Plz help me out by providing any solution.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head>

<style type="text/css">

div.tableContainer {
width: 155%; /* table width will be 99% of this*/
height: 550px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}
table.report .c { text-align: center }
table.report .r { text-align: right }

table.report {
width: 100%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #f7f7f7;
border-collapse : collapse;
table-layout : fixed;
}

table.report>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 500px;
overflow-x: hidden;
}

table.report thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}

table.report thead td, thead th {
color: #FFFFFF;
text-align: center;
background-color: #6699FF;
border-right : 1px solid #ffffff;
width : 100px;
text-align : center;
}

table.report td.h {
color: #FFFFFF;
text-align: center;
background-color: #6699FF;
}

table.report td {
font-size: small;
color: #000000;
text-align: left;
background-color: #CCCCFF;
vertical-align: top;
padding-right: 0.75ex;
padding-left: 0.75ex;
}

table.report td.locked_left, th.locked_left {
background-color: #CCCCFF;
left : expression(document.getElementById('table_container').scrollLeft);
border-left : 1px ;
position : relative;
z-index : 0
}


#table_container {
width : 1000px;
overflow : scroll;
}

</style>

<title>Reports</title>

</head>
<body>

<div align='center'>
<font size='2'><font size='3'><b>Accounts Payable Aging Summary (CANMCCO)</b></font>
<div id='table_container'>

<table class="report">
<thead>
<tr><td class="h">Paying Entity</td><td class="h">Partner ID</td><td class="h">Partner Name</td><td class="h">Service</td><td class="h">Jan-2007</td><td class="h">Feb-2007</td><td class="h">Mar-2007</td><td class="h">Total</td><td class="h">Summary1</td></tr></thead>
</table>
<div class='tableContainer'>
<table class="report" $border cellspacing="1" cellpadding="1" style="margin-left:-1">
<tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ABWDC'>ABWDC</a></td><td>New Millenium Telecom Services N.V</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ABWDC&rectent=ABWDC&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ABWDC&rectent=ABWDC&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ABWDC&rectent=ABWDC&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'></a></td><td class="c">0.000</td><td class="c"><a href='/cgi-bin/summary?list= CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead>
<tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ABWSE'>ABWSE</a></td><td>Servicio di Telecomunicaion di Aruba</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ABWSE&rectent=ABWSE&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ABWSE&rectent=ABWSE&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ABWSE&rectent=ABWSE&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>167.949</a></td><td class="c">167.949</td><td class="c"><a href='/cgi-bin/summary?list= 167.949 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead>

<tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ARM01'>ARM01</a></td><td>Armenia Telephone Company</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>1.807</a></td><td class="c">1.807</td><td class="c"><a href='/cgi-bin/summary?list= 1.807 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead><tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ARM01'>ARM01</a></td><td>Armenia Telephone Company</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>1.807</a></td><td class="c">1.807</td><td class="c"><a href='/cgi-bin/summary?list= 1.807 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead><tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ARM01'>ARM01</a></td><td>Armenia Telephone Company</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>1.807</a></td><td class="c">1.807</td><td class="c"><a href='/cgi-bin/summary?list= 1.807 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead><tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ARM01'>ARM01</a></td><td>Armenia Telephone Company</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>1.807</a></td><td class="c">1.807</td><td class="c"><a href='/cgi-bin/summary?list= 1.807 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead><tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ARM01'>ARM01</a></td><td>Armenia Telephone Company</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM01&rectent=ARM01&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>1.807</a></td><td class="c">1.807</td><td class="c"><a href='/cgi-bin/summary?list= 1.807 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead>

<tr><td class="locked_left"><a href='/cgi-bin/tent?tent=CANMC'>CANMC</a></td><td class="locked_left"><a href='/cgi-bin/tent?tent=ARM05'>ARM05</a></td><td>K Telecom CJSC</td><td class="c">Voice</td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM05&rectent=ARM05&paytentsel=CANMC&paytent=CANMC&period=2007/01&svctype=Voice'></a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM05&rectent=ARM05&paytentsel=CANMC&paytent=CANMC&period=2007/02&svctype=Voice'>0.401</a></td><td class="c"><a href='/cgi-bin/invoice?invid=&rectentsel=ARM05&rectent=ARM05&paytentsel=CANMC&paytent=CANMC&period=2007/03&svctype=Voice'>53.689</a></td><td class="c">54.090</td><td class="c"><a href='/cgi-bin/summary?list= 0.401 53.689 CANMC 2007/01 2007/03'>Summary2</a></td></tr></thead>
</table>
</body>
</html>


thanks in advance,
Raj

MyWebsiteAdvise
05-14-2007, 03:07 PM
Hi Raj,

I find a good example for you:
http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

Enjoy,
Learn Web Development (http://www.mywebsiteadviser.com)