1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Help Please

Discussion in 'HTML, Graphics & Programming' started by sparkymark75, 17 Jan 2006.

  1. sparkymark75

    Mobster

    Joined: 8 Jan 2003

    Posts: 2,579

    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.
     
  2. Jake 2.0

    Banned

    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">
     
  3. PAz

    Soldato

    Joined: 18 Oct 2002

    Posts: 6,486

    Location: Bucks

    use an iFrame?
     
  4. thesubstitute

    Wise Guy

    Joined: 26 Jul 2004

    Posts: 1,073

    Location: Birmingham

    Use <thead> for the headings, and <tbody> for the actual data, then apply overflow to the tbody. This shouldn't be done via id / classes
     
  5. sparkymark75

    Mobster

    Joined: 8 Jan 2003

    Posts: 2,579

    Location: Scotland

    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.
     
  6. thesubstitute

    Wise Guy

    Joined: 26 Jul 2004

    Posts: 1,073

    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?
     
  7. sparkymark75

    Mobster

    Joined: 8 Jan 2003

    Posts: 2,579

    Location: Scotland

    My mistake, I didn't use any Javascript for this, only CSS.
     
    Last edited: 18 Jan 2006
  8. sparkymark75

    Mobster

    Joined: 8 Jan 2003

    Posts: 2,579

    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
     
  9. thesubstitute

    Wise Guy

    Joined: 26 Jul 2004

    Posts: 1,073

    Location: Birmingham

    You understand that it doesn't work on anything except IE?
     
  10. sparkymark75

    Mobster

    Joined: 8 Jan 2003

    Posts: 2,579

    Location: Scotland

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

    Mobster

    Joined: 8 Jan 2003

    Posts: 2,579

    Location: Scotland

    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 :mad:

    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