CSS Help Please

[sparkymark75]

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.

 

[sparkymark75]

I've got a fix for this using a combination of CSS and Javascript. I'll post the answer when I get home later if anyone's interested.

 

[sparkymark75]

My mistake, I didn't use any Javascript for this, only CSS.

 

[sparkymark75]

I added the following styles to the page;

	/* 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

 

[sparkymark75]

It's for a corporate environment where the only supported browser is IE.

 

[sparkymark75]

aaahhhh...


...it works fine when in a page on it's own, but as soon as I add it to the rest of the content of the page, it no longer works

I'm playing with the HTML output of an ASP.NET 2 page incase your wondering.

Would anyone be kind enough to have a look?

http://mparter.pwp.blueyonder.co.uk/downloads/FixedCols.zip

Thanks