SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple table scroll while one stays still?

    Is there a way for me to show 3 tables in a row, make the whole div scrollable, all while making the first table stay fixed? Its hard to explain so I have included some code. What I want is table 2 and 3 to move while table one just sits there.

    Code:
    <div style="width:300px; overflow-x:auto;">
    <table style="margin-bottom:10px;">
    <tr>
    <td>
    <table style="width:200px;"><tr><td>Table 1</td></tr></table>
    </td>
    <td>
    <table style="width:200px;"><tr><td>Table 2</td></tr></table>
    </td>
    <td>
    <table style="width:200px;"><tr><td>Table 3</td></tr></table>
    </td>
    </tr>
    </table>
    </div>
    Thanks in advance guys.

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

    I'm not sure I really understand but if you keep the first table outside of the div that holds tables 2 and 3 and then just let tables 2 and 4 scroll.

    Something like this very old demo:
    http://www.pmob.co.uk/temp/tablescroll.htm

    You can do something like this with a single table for a vertical scroll:

    http://www.pmob.co.uk/temp/table-fixed-header.htm

    Not sure they'll be any use though

  3. #3
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for those ideas Paul.

    I actually have it coded with the first table outside of the div but it is getting in the way of an idea I have to keep everything in the same container. I should have specified that was my real issue.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have to keep everything in the same container
    You may need to provide a more detailed example of what you want as my answer would simply be to say wrap a container around the whole lot and then they are in the same container But I realise that you must have other plans in mind.

    The first example I posted is probably the only real way of doing this but you could possibly use position:fixed for the first table and let the other tables scroll behind. Ie6 doesn't understand position:fixed though so that makes it a bit awkward.

    If you can post exactly what you want and why you need this effect then we might be able to suggest something else.

  5. #5
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As ugly and against it as I may be, the markup I first provided is what I am kind of locked in to. It actually is tabula data so I guess its not all that bad.

    What I am looking to do is lock row headers for tabular data (not to be confused with column headers)


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
  •