Excel-style Persistent Column(s)

Discussion in 'HTML' started by Sean, Jul 19, 2007.

  1. Sean

    Sean Guest

    I've got a table that is wider than the window, and I was wondering if
    there is any way to setup some persistent columns and have the others
    slide "behind" them...similar to what you can do in Excel. Any
    thoughts?
     
    Sean, Jul 19, 2007
    #1
    1. Advertising

  2. Sean

    dorayme Guest

    In article
    <>,
    Sean <> wrote:

    > I've got a table that is wider than the window, and I was wondering if
    > there is any way to setup some persistent columns and have the others
    > slide "behind" them...similar to what you can do in Excel. Any
    > thoughts?


    Yes, put the persistent ones on the left and the right ones will
    slide into view on demand at a simple action of the scrolling
    mechanism built into browsers.

    --
    dorayme
     
    dorayme, Jul 19, 2007
    #2
    1. Advertising

  3. Sean

    Sean Guest

    Persistent to me means always showing, not...there until you scroll
    far enough to the right. I don't mean to be rude, but what you
    described was a normal table...I'm not sure how I can describe what I
    need any clearer.

    -Sean

    On Jul 19, 5:24 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    > Sean <> wrote:
    > > I've got a table that is wider than the window, and I was wondering if
    > > there is any way to setup some persistent columns and have the others
    > > slide "behind" them...similar to what you can do in Excel. Any
    > > thoughts?

    >
    > Yes, put the persistent ones on the left and the right ones will
    > slide into view on demand at a simple action of the scrolling
    > mechanism built into browsers.
    >
    > --
    > dorayme
     
    Sean, Jul 20, 2007
    #3
  4. Sean

    dorayme Guest

    In article
    <>,
    Sean <> wrote:

    > Persistent to me means always showing, not...there until you scroll
    > far enough to the right. I don't mean to be rude, but what you
    > described was a normal table...I'm not sure how I can describe what I
    > need any clearer.
    >
    > -Sean
    >
    > On Jul 19, 5:24 pm, dorayme <> wrote:
    > > In article
    > > <>,
    > >
    > > Sean <> wrote:
    > > > I've got a table that is wider than the window, and I was wondering if
    > > > there is any way to setup some persistent columns and have the others
    > > > slide "behind" them...similar to what you can do in Excel. Any
    > > > thoughts?

    > >
    > > Yes, put the persistent ones on the left and the right ones will
    > > slide into view on demand at a simple action of the scrolling
    > > mechanism built into browsers.



    I guess I am trying to get some explanation from you why you
    would want not to have a normal table. In a browser at least, if
    you do not constrain the widths of the columns, they will
    contract as best as they can to fit all in. If some are off the
    the right and therefore hidden, what makes this worse than being
    hidden in another fancier way?

    --
    dorayme
     
    dorayme, Jul 20, 2007
    #4
  5. Sean

    Bergamot Guest

    Sean wrote:
    > I've got a table that is wider than the window, and I was wondering if
    > there is any way to setup some persistent columns and have the others
    > slide "behind" them...similar to what you can do in Excel.


    You can probably do something with JavaScript trickery, but maybe some
    rethinking on the table structure is in order, too.

    --
    Berg
     
    Bergamot, Jul 20, 2007
    #5
  6. Gazing into my crystal ball I observed Sean <> writing
    in news::

    > I've got a table that is wider than the window, and I was wondering if
    > there is any way to setup some persistent columns and have the others
    > slide "behind" them...similar to what you can do in Excel. Any
    > thoughts?
    >


    I understand what you want, say columns A-D are visible/locked in place
    and columns E-I are visible at without scrolling. However, when you
    scroll the content of columns A-D _still_ stay in place, but the columns
    next to it seem to slide under.

    You _might_ be able to do simulate what you want with frames, but AFAIK,
    there is no way to do this, mainly due to the structure of tables
    themselves.

    Anyone?

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Jul 20, 2007
    #6
  7. Sean

    Sean Guest

    On Jul 20, 10:54 am, Adrienne Boswell <> wrote:
    > Gazing into my crystal ball I observed Sean <> writing
    > innews::
    >
    > > I've got a table that is wider than the window, and I was wondering if
    > > there is any way to setup some persistent columns and have the others
    > > slide "behind" them...similar to what you can do in Excel. Any
    > > thoughts?

    >
    > I understand what you want, say columns A-D are visible/locked in place
    > and columns E-I are visible at without scrolling. However, when you
    > scroll the content of columns A-D _still_ stay in place, but the columns
    > next to it seem to slide under.
    >
    > You _might_ be able to do simulate what you want with frames, but AFAIK,
    > there is no way to do this, mainly due to the structure of tables
    > themselves.
    >
    > Anyone?
    >
    > --
    > Adrienne Boswell at Home
    > Arbpen Web Site Design Serviceshttp://www.cavalcade-of-coding.info
    > Please respond to the group so others can share


    That is EXACTLY what I'm talking about. I determined that it could be
    done with two DIVs, but decided to abandon the idea for a more
    straightforward approach. The basic idea with the two DIVs is that
    they are setup side-by-side and the one on the right is a fixed width
    with the CSS overflow property set to auto. This puts a scrollbar
    along the bottom for scrolling left to right with the appearance of
    sliding the columns under the static set on the left.

    -Sean
     
    Sean, Jul 20, 2007
    #7
  8. Sean wrote:

    > I've got a table that is wider than the window, and I was wondering if
    > there is any way to setup some persistent columns and have the others
    > slide "behind" them...similar to what you can do in Excel. Any
    > thoughts?


    If you were to ask about rows, then yes, this is possible -- you can use
    CSS to set an explicit height on TBODY and then scroll the overflow,
    allowing the THEAD and TFOOT to remain stationary. However, it has limited
    browser support IIRC.

    The best suggestion I can give you is to repeat the important columns at
    the end.

    e.g.:

    =====================================================================================================
    Nation |Currency|Language|Pop [1]|CO2 [2]|CO2/pop [3]|GDP [4] |GDP/pop [5]|GDP/CO2 [6]|Nation
    ---------+--------+--------+-------+-------+-----------+-----------+-----------+-----------+---------
    France |EUR |fr | 64| 378| 6.2| 2 216 273| 35 404| 5 859|France
    UK |GBP |en | 60| 544| 9.4| 2 295 039| 39 214| 4 222|UK
    USA |USD |en-US | 302| 5872| 19.8| 12 438 873| 44 190| 2 118|USA
    Australia|AUD |en-AU | 21| 356| 18.8| 692 436| 36 553| 1 943|Australia
    =====================================================================================================

    1. Millions.
    2. Carbon Dioxide Emissions (Megatonnes) per annum.
    3. Carbon Dioxide Emissions (Tonnes) per capita, per annum.
    4. Millions of US Dollars per annum.
    5. US Dollars per capita, per annum.
    6. US Dollars per tonne of CO2.

    By putting the Nation column at each end of the table, I've made it
    easier to read no matter which end you've scrolled to.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 29 days, 18:31.]

    Parsing an HTML Table with PEAR's XML_HTTPSax3
    http://tobyinkster.co.uk/blog/2007/07/20/html-table-parsing/
     
    Toby A Inkster, Jul 20, 2007
    #8
  9. Sean

    Bergamot Guest

    Sean wrote:
    >
    > The basic idea with the two DIVs is that
    > they are setup side-by-side and the one on the right is a fixed width
    > with the CSS overflow property set to auto.


    I've seen this attempted before, but it never works. It's too dependent
    on maintaining the fake table row alignment, which can get horked very
    quickly once the user changes their text and/or browser window size, or
    even uses a different font. Zoom text up just a little and the delicate
    alignment is broken, making the whole thing unusable. I should also
    mention that the structure would be illogical if CSS (and/or JavaScript,
    if that were part of it) were disabled.

    I'm glad to hear you abandoned the idea, but hope whatever you decided
    to do instead doesn't have those issues.

    --
    Berg
     
    Bergamot, Jul 20, 2007
    #9
  10. Sean

    I V Guest

    On Thu, 19 Jul 2007 12:12:59 +0000, Sean wrote:

    > I've got a table that is wider than the window, and I was wondering if
    > there is any way to setup some persistent columns and have the others
    > slide "behind" them...similar to what you can do in Excel. Any
    > thoughts?


    You can use position: fixed , but IIRC, Internet Explorer doesn't support
    it. This would work if the fixed column is the first or last in the table,
    I'm not sure if it could be extended to have the persistent column in the
    middle:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Scrolling/fixed table</title>
    <style type="text/css" media="screen">
    table {
    margin-left: 4em;
    }

    th.fixed {
    margin-left: -4em;
    position: fixed;
    background-color: red;
    }
    </style>

    </head>

    <table>
    <tr><th class=fixed>fixed</th><th>Scrolling</th><th>Scrolling</th><th>Scrolling</th><th>Scrolling</th></tr>
    <tr><th class=fixed>Title 1</th><td>data</td><td>data</td><td>data</td><td>data</td></tr>
    <tr><th class=fixed>Title 2</th><td>data</td><td>data</td><td>data</td><td>data</td></tr>
    <tr><th class=fixed>Title 3</th><td>data</td><td>data</td><td>data</td><td>data</td></tr>
    <tr><th class=fixed>Title 4</th><td>data</td><td>data</td><td>data</td><td>data</td></tr>
    <tr><th class=fixed>Title 5</th><td>data</td><td>data</td><td>data</td><td>data</td></tr>


    </table>

    </html>
     
    I V, Jul 21, 2007
    #10
  11. Sean

    Brett Merkey Guest

    Sean wrote:
    || I've got a table that is wider than the window, and I was wondering if
    || there is any way to setup some persistent columns and have the others
    || slide "behind" them...similar to what you can do in Excel. Any
    || thoughts?

    One CSS solution for IE only:
    http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

    The only way I know to do it x-browser is to use JavaScript, which is often
    brittle and unsuitable to a production environment -- or to make two tables
    look like one, with JavaScript to synchronize scrolling.
     
    Brett Merkey, Jul 21, 2007
    #11
  12. Sean

    Tim Streater Guest

    In article <5n.co.uk>,
    Toby A Inkster <> wrote:

    > Sean wrote:
    >
    > > I've got a table that is wider than the window, and I was wondering if
    > > there is any way to setup some persistent columns and have the others
    > > slide "behind" them...similar to what you can do in Excel. Any
    > > thoughts?

    >
    > If you were to ask about rows, then yes, this is possible -- you can use
    > CSS to set an explicit height on TBODY and then scroll the overflow,
    > allowing the THEAD and TFOOT to remain stationary. However, it has limited
    > browser support IIRC.


    Actually, I would be quite happy to be able to scroll table rows leaving
    the header stationary. So, do you mean something like this?

    <tbody style="max-height: 200px; overflow: scroll;">
     
    Tim Streater, Aug 2, 2007
    #12
  13. Tim Streater wrote:

    > Actually, I would be quite happy to be able to scroll table rows leaving
    > the header stationary. So, do you mean something like this?
    >
    > <tbody style="max-height: 200px; overflow: scroll;">


    Yep -- but as I said, browser support is limited.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 43 days, 13:44.]

    Command Line Interfaces, Again
    http://tobyinkster.co.uk/blog/2007/08/02/command-line-again/
     
    Toby A Inkster, Aug 3, 2007
    #13
  14. Sean

    Tim Streater Guest

    In article <5n.co.uk>,
    Toby A Inkster <> wrote:

    > Tim Streater wrote:
    >
    > > Actually, I would be quite happy to be able to scroll table rows leaving
    > > the header stationary. So, do you mean something like this?
    > >
    > > <tbody style="max-height: 200px; overflow: scroll;">

    >
    > Yep -- but as I said, browser support is limited.


    Worse than that :)

    I did a bit of a search and found some working example, but many seemed
    to require large amounts of javascript and others some amount of creepy
    css. I notice my books only hint that this is the purpose of tbody and
    don't go further.

    Bit of a disappointment, really, I would have thought there were many
    instances where it would be useful.
     
    Tim Streater, Aug 3, 2007
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    2,467
  2. =?Utf-8?B?c2hhc2hhbmsga3Vsa2Fybmk=?=

    Problem with Excel reports ::::Excel 2003 Migration To Excel 2007

    =?Utf-8?B?c2hhc2hhbmsga3Vsa2Fybmk=?=, Oct 5, 2007, in forum: ASP .Net
    Replies:
    15
    Views:
    1,528
    =?Utf-8?B?c2hhc2hhbmsga3Vsa2Fybmk=?=
    Oct 24, 2007
  3. gk
    Replies:
    7
    Views:
    979
    Tom Anderson
    Oct 12, 2010
  4. Ken Varn
    Replies:
    0
    Views:
    474
    Ken Varn
    Apr 26, 2004
  5. Guillaume

    Keeping persistent layer (div with style) coordinates ?

    Guillaume, Aug 10, 2004, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    119
    Guillaume
    Aug 10, 2004
Loading...

Share This Page