Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    looking for something like excel's freeze panes

    hey guys, I have a really long table with headings and then a series of rows for each contract that we have running.
    The headings are for things like "data received", "server built" "server checked" "processed data sent out" and the like, and for each row there is a series of checkboxes to indicated which stage each contract is up to, so at any time of the day, we can see our current month's state of play as such.
    The problem is that when users scroll down the page, the table headings disappear and all we can see are rows and rows of checked and unchecked boxes, is there a way, maybe using frames, to detect the first row of the table with the headings and make it stay on the screen at the time?

    I use php and mysql to generate and populate the important parts of the table, this may cause some issues with frames, I don't know?

    Any ideas on what I can do that's simple ? :P

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    If you are using css with a non-fluid layout, and not using IE6 you could use
    Code:
    position: fixed;
    Just split the table and make the header row a seperate table which is fixed at the top of the screen.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts
    the problem I found if split the table is that the column widths don't line up, headings are obviously a word long, and a checkbox is not very wide so I can easily fix the first table but it's not the correct width.
    *light bulb comes on*

    ah but I can do a style can't I giving abolsute widths for each column? Hmm, sounds interesting if not a bit long winded, any other ideas?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,870
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Quote Originally Posted by Donkey View Post
    Just split the table and make the header row a seperate table which is fixed at the top of the screen.
    Sorry if I sound too harsh but that’s the wrong approach. Tim Berners-Lee and the guys at the W3C have already thought of that when you were still wetting your pants.

    Anyway, here’s the solution:

    Tables don’t just have column groups (<colgroup>), they also have rowgroups which are <thead>, <tfoot> and <tbody>. They separate a table into the appropriate sections and you can use CSS to only give a certain section an overflow.
    Code:
    <table>
      <thead>
        <tr>
          <th>header column 1</th>
          <th>header column 2</th>
          <th>header column 3</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>footer cell 1</td>
          <td>footer cell 2</td>
          <td>footer cell 3</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
    Code:
    tbody {
      height: 100px;
      overflow: auto;
    }
    Note:
    1. If you’re using any rowgroup element, you have to use all of them, i. e. you can’t just use thead and tbody, you have to use tfoot as well.
    2. The correct order is always thead > tfoot > tbody, i. e. tfoot must come before tbody in the source code.
    3. You can have as many tbody sections as you like in one table (giving them a class or ID you can style them differently) but you can have only one table header and footer per table.


    Oh and on another note: IE 6 will probably not do it right.

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That looks awesome and I shall give that a go, just a quickie though, you've got <th> ... </th> in the head, should these be normal <td>'s ?

    *edit*
    IE6 doesn't matter because this is only an internal page and we all use IE7 so that's all cool.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    That looks awesome and I shall give that a go, just a quickie though, you've got <th> ... </th> in the head, should these be normal <td>'s ?
    I believe it's OK as validator doesn't give any errors.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,870
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK I'm a bit lost now, I put this in

    Code:
    <table border="2">
    <thead>
      <tr>
        <th>Market</th>
        <th>Data received ?</th>
        <th>Server</th>
        <th>Server OK</th>
        <th>Slice</th>
        <th>Slice OK</th>
        <th>Published</th>
        <th>Charts</th>
        <th>Problem</th>
      </tr>
    </thead>
     
    <tfoot>
      <tr>
        <td><input type="submit" value="Update" name="submit"></td></form>
      </tr>
    </tfoot> 
    
    <tbody>
    *many rows in unpasteable horrible untindy php generated code*
    </tbody>
    </table>
    and the table is generated fine, it has the headers at the top and the submit button at the bottom, so no problem there.

    But adding

    Code:
    <style type="text/css">
    tbody {
      height:10px;
      overflow:auto;
      }
    </style>
    hasn't changed the way the window scrolls, it just scrolls as normal with the headers disappearing off the top of the window when you scroll down, have I done something wrong?

  • #9
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Code:
    Sorry if I sound too harsh but thatís the wrong approach. Tim Berners-Lee and the guys at the W3C have already thought of that when you were still wetting your pants.
    I'm happy to be corrected, but concerned over your misapprehension regarding my bladder control, I'm 3 years older than TBL so I doubt that he was even born when I stopped wearing nappies. I have never wet my pants, but I am told that is something to look forward to if I live long enough to become senile.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Donkey View Post
    Code:
    Sorry if I sound too harsh but thatís the wrong approach. Tim Berners-Lee and the guys at the W3C have already thought of that when you were still wetting your pants.
    I'm happy to be corrected, but concerned over your misapprehension regarding my bladder control, I'm 3 years older than TBL so I doubt that he was even born when I stopped wearing nappies. I have never wet my pants, but I am told that is something to look forward to if I live long enough to become senile.
    Not to be re-commended. It's very uncomfortable.

    Frank

    83 yrs old and still dry.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,870
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Quote Originally Posted by yoinkster View Post
    But adding

    Code:
    <style type="text/css">
    tbody {
      height:10px;
      overflow:auto;
      }
    </style>
    hasn't changed the way the window scrolls, it just scrolls as normal with the headers disappearing off the top of the window when you scroll down, have I done something wrong?
    Sorry, I didn’t test it myself and haven’t actually done this in any project (but I remember having tested it a long time ago) but it’s not as easy as the W3C intended. But typing “table row fixed html” into Google’s search field brought me to this site which shows it very nicely. Funnily this does work in IE 6 but not in IE 7 (which is probably because it hasn’t been updated since). Making the tbody display as block element seems to be the important part.

  • Users who have thanked VIPStephan for this post:

    abduraooft (07-22-2008)

  • #12
    New Coder
    Join Date
    Jan 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have to confess at most of that site source code looking fairly Welsh to me.
    In the source there are loads of <tr>'s but when it renders in IE7 {which you say it doesn't work in} I only get the first one with cell content 1,2,3 in the columns and none of the other rows. Is this what you mean about it not working in IE7 ?
    But anyway from what I can gather from your statement and the code, I just need to add something like
    Code:
    display:block;
    to my style code ? Or is it far more complex than I'm guessing ?

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,870
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Quote Originally Posted by yoinkster View Post
    I only get the first one with cell content 1,2,3 in the columns and none of the other rows. Is this what you mean about it not working in IE7 ?
    Thatís right. It works in IE 6 as it does in all other modern browsers. IE 7 is the only one but I think if it works in version 6 then there must be a way to get it in IE 7 as well. I havenít looked at it too thoroughly but I guess itís some kind hack for IE 6 that makes it work there and that is either not compatible in IE 7 or IE 7 needs another Ąspecial treatmentď to get it working. Would need to investigate but I ainít got too much time. You could contact the guy who developed it for help on this.

    Quote Originally Posted by yoinkster View Post
    But anyway from what I can gather from your statement and the code, I just need to add something like
    Code:
    display:block;
    to my style code ? Or is it far more complex than I'm guessing ?
    Well, basically thatís what allows scrolling in most browsers but to get it looking pretty there seems to be a little more to it. Just try and look at it in different browsers.
    And by the way: To test in IE 6 while having IE 7 at the same time thereís Multiple IE.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •