CSS Help Please

Soldato
Joined
8 Jan 2003
Posts
3,692
Location
Scotland
Say I have a table with 25 columns and 5 rows. I want the first 5 columns to be fixed so that the user can scroll through the other 20 columns whilst still seeing the data in the first 5 columns.

I've provided a link to an Excel spreadsheet which replicates the functionality.

http://mparter.pwp.blueyonder.co.uk/downloads/example.xls

Thanks in advance for any help.

PS. This is for an internal only app with the target browser being IE 5.5+ so proprietary MS code isn't an issue.
 
Permabanned
Joined
16 Dec 2002
Posts
10,237
erm heard of css? i think you need to do something like:
<style type=text/css>
#fix {
position:fixed;
}

and on the first five columns give them something like <col id="fix">
 
Associate
Joined
26 Jul 2004
Posts
1,074
Location
Birmingham
Really shouldn't need javascript at all for this if you just structure your table using the <tbody> and simply apply overflow to it. Javascript would be an overkill completely, and what happens when the visitor has disabled javascript?
 
Soldato
OP
Joined
8 Jan 2003
Posts
3,692
Location
Scotland
I added the following styles to the page;

Code:
	/* Div container to wrap the datagrid */
    div#tbl_container {
        width: 100%;
		height: expression(ctl00_ContentPlaceHolder1_gvwStudents.clientHeight+17);
        overflow: auto;
		border-color: #FF0000;
		border-width: 1px;
    }
    td.locked,  th.locked{
        background-color: #CCCCCC;
        font-weight: bold;
        border-right: 1px solid silver;
        left: expression(tbl_container.scrollLeft-2); /*IE5+ only*/
        position: relative;
    }

A div with the ID tbl_container was then wrapped around the table, whose ID is ctl00_ContentPlaceHolder1_gvwStudents.

Any columns that were to be fixed were simply given the class locked.

You can see it in action at;

http://mparter.pwp.blueyonder.co.uk/tests/fixed_col.htm
 
Back
Top Bottom