SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Scrolling Tables (yes, again)

    Hiya (my first post!)

    Now I know there are a plethora of examples of scrolling tables out there, some of them very good indeed.

    However, I have a few problems with all the ones I've found (usually different problems for different ones of course

    Anyway, let me try and define what I want, and we can take it from there.

    So, there are 2 different tables I want to make scrolling (actually 4 all together, but they follow 2 basic formats).

    Context: I'm using php to get data from a mySQL database to display in the table. The site is here (still in "development")

    Now, the main problem I seem to come across the most is the problem of width. I have had some success getting the scroll to work with fixed width columns, but I would really like to be able to scroll a table that does not have set column (or overall) widths. As you can see the tables are fairly large, some of them very wide. It's a push to fit them on a screen resolution less than 1024, but I'd like it to cope (at least in some part) with a screen res. of 800 or better. I'd like the table to find it's own best fit if possible (making it fit the smallest is really ugly and cramped for a lot of the data). DOes that makes sense?

    The other much less problematic problem, but it has been an issue with some examples, is that some of the tables have 2 header rows.

    There may be other problems I've come across (like divs that don't shrink to fit in IE etc,) but we can address those if they come up later...)

    So, I think that's about the gist of it, any help/suggestions more than welcome. Thanks.

  2. #2
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm, I want fixed headers of course (I thought it went without saying, but on reflection thought I'd better be explict

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I was getting so hacked off with this (pardon the pun) I went with a javascript solution. The page will have lots of javascript in it anyway when it's finished (column sorting etc) so it's probably not a huge deal. This is actually the first bit of DOM javascript I wrote entirely myself from scratch, I'm quite chuffed with myself

    I'd still love to see a (nearly) pure css solution if anyone has any ideas. Or a way to do it in one table (I might be able to get that to work too, now I have this width solution up my sleeve).

    (The page is here btw if you want to have a look - http://www.dewiek.net/test.html - some of the columns are a pixel or so out but I can certainly live with that, and I might be able to hide that with the style.)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Steve,

    Sorry I missed your first post.

    Id be interested to see what you've done but the link won't load for some reason. If I can see what you've done then it would be easier to say whether it was possible or not in css.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [Gah. Server's down. Try again later or I can post it here.]

    Edit: It's working now, try it...
    Last edited by Steve-Law; Mar 2, 2005 at 05:03.

  6. #6
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so this isn't CSS anymore, but I totally inspired myself and was on a roll. I made a much better (to me) solution. Again using javascript, but this time we start with a single table then split off the header into a separate table to "fix" it while we scroll the rest. The code is a bit of a mess atm, but anyone who might be interested it's http://www.dewiek.net/test2.html

    The beauty of this way is that a) you just use a normal table (as long as it has thead and tbody (id tags can be changed)) and b) it gets the widths exactly right

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Steve,

    That looks pretty good

    I tried it in firefox with js switched off and it degrades very nicely.

    Is it possible to leave the link up for a while as I'm sure people will be looking for this?

    Paul

  8. #8
    SitePoint Zealot MacRankin's Avatar
    Join Date
    Sep 2002
    Location
    London
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a post that I posted to recently on another forum...

    I came across an article on the KillerSites web site intructing someone like me or whoever how to create a scrolling window in a web page without using frames or iframes!

    It so happens, I'd been working on my illustrator tutorial and links pages implementing iframes, and I thought to meself that I would have a go at this new way (to me) of creating an iframe-like object just by using the 'overflow' property.

    What you'll see on the original article may lead you to think that there is no other alternative than to place this div within a td cell.

    This is the snippet taken from the original article:

    <div style="overflow:auto; height:250px; width:300px;">

    And this is something that I've been cooking up for the last half-hour or so:

    <div style="padding-left:12.5%;">

    <div style="overflow: auto; height350px; width:84.25%; padding-left:2%; padding-right:0%; background-color:#ffcc99;">

    <div style="width:95%;">

    Bucket-loads of text goes in here.

    </div></div></div>

    I've slightly altered the above post, not only to correct a spelling mistake but to also make this thing center itself on any page.

    P.S. I realize you are using JavaScript in your example, but perhaps there's something in the above that you can salvage.

    P.P.S. I'm still trying to get to grips with CSS, so, if you've got any problems with this, err, you're on your own.
    We Brits do things differently. But we still get shot at.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi MacRankin,

    There is no problem creating scollable content like iframes and is quites straight forward to do . Steve was after a table where the header content doesn't move while the data does. This is achievable in a fixed width design and by separating the header form the table. Hoewever Steve wanted the headers to match the width of the columns which could not be done by CSS alone.

    Getting it to scroll and fixing content is pretty easy as in this example.

    http://www.pmob.co.uk/temp/tablescroll.htm

    However Steve's requirements were more complicated than this.

    Your example is though quite easy to do and achievable. You should have no problems creating a scrollable div and the code you posted looks more or less as though it would work.

    Thanks for the post anyway

    Paul

  10. #10
    SitePoint Zealot MacRankin's Avatar
    Join Date
    Sep 2002
    Location
    London
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks alot there for the thanks Paul O'B.

    I've noticed from another thread that you got some tutorials on your site. I'll have to check them out some time later.

    Anyway, I checked out Steve-Law's site, and it looks like he's getting stuff done the way he wants, though I have no idea if any of my gobble-de-gook helped out - probably not.

    Just before I disappear back underneath my rock, here's another piece of useless code that I just cooked up in the last hour or so:

    <div style="margin-left:10%;" >

    <div style="overflow: visible; height:350px; width:600px; padding-top:42px; padding-left:0%; padding-right:1.75%; background-color:#330000;">
    <!-- Spacer_Table -->

    <table width="35%" height="6" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>

    <td style="font-family: verdana; font-size: 18px; color: #FF6600;" width="100%" height="" align="center">
    http://www.<b>MacRankin</b>.co.uk/
    </td></tr></table>

    <!-- End of Spacer_Table -->


    <div style="overflow: auto; height:350px; width:100%; padding-left:2%; padding-right:0%; background-color:#FFCC99;">

    <div style="width:95%;">

    More buckets of stuff in here

    </div></div></div></div>

    Paul O'B, I thought about what you said regarding the header not moving but the data, so, here it is. I got it to center in I.E. 5.1.7 & Mozilla 1.2.1 for the Mac platform.
    We Brits do things differently. But we still get shot at.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Just before I disappear back underneath my rock, here's another piece of useless code that I just cooked up in the last hour or so:
    lol - thats the general idea - so you weren't too far away.

    Now if you can just make irt multi column with headers that scale automatically to the content width you'll be home and dry

    Thanks for your input and effort anyway as its always appreciated

    Paul

  12. #12
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    That looks pretty good
    Cheers, I'm quite happy with it.

    Quote Originally Posted by Paul O'B
    I tried it in firefox with js switched off and it degrades very nicely.
    Wow, I hadn't even got that far with my testing yet I notice that in IE without Javascript it makes a scrolling table but without fixing the header (and with the scrollbar way over on the right). I'll change that to be just a normal table for IE.

    Quote Originally Posted by Paul O'B
    Is it possible to leave the link up for a while as I'm sure people will be looking for this?
    Absolutely. In between the actual site I'm really working on I'll probably make some tweaks to the example to make it even better (like the one mentioned above)...

  13. #13
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MacRankin
    What you'll see on the original article may lead you to think that there is no other alternative than to place this div within a td cell.
    Using a td for the table container instead of a div may be a way to get some of the "standard" scrolling tables to work without fixed widths (tds shrink to fit in IE where divs don't). I started to go down this route at one stage but got distracted with the javascript solution.

    I might try it at some point.

    Edit: Just tried it really quickly with everyone's favourite scrolling table: http://www.imaputz.com/cssStuff/bulletVersion.html

    I removed all width assignments and wrapped the table container div in a single cell table. It works! Now why did that give me so much trouble before!? Damn. Thanks MacRankin. A little inspiration goes a long way...

    Is it fair to say that an extra single cell table is preferable to a javascript DOM manipulation? I'd probably think yes.
    Last edited by Steve-Law; Mar 4, 2005 at 03:58.

  14. #14
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Addendum. I got home and tried it and it's totally messed up in Firefox. *That's* why I abandoned it last time Oh well back to the JS...

  15. #15
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay here is a tidied up and commented version. Any comments or suggestions for further improvement welcome...

    http://www.dewiek.net/table.html

  16. #16
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I think that's great! It's just what I want actually - the scrolling table I have now has a horizontal scrollbar in it and yours doesn't, so it's cool.

  17. #17
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hate to burst bubbles, but I tried to implement this table on something I'm developing at the moment and I found that it doesn't work with a valid DTD. I thought I was doing something wrong because it simply wasn't working, but then I took out the DTD (it was 'Strict') and it worked fine. I tried again with a Transitional DTD, but that didn't work either (what you have there on your page is incomplete - not a true DTD).

    Great table and I wish I could use it, but I kind of need the standards.


Bookmarks

Posting Permissions

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