Excel-style Persistent Column(s)

[Sean]

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?

 

[dorayme]

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.

 

[Sean]

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

 

[dorayme]

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

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?

 

[Bergamot]

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.

 

[Adrienne Boswell]

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?

 

[Sean]

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?

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

 

[Toby A Inkster]

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/

 

[Bergamot]

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.

 

[I V]

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>

 

[Brett Merkey]

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.

 

[Tim Streater]

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;">

 

[Toby A Inkster]

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/

 

[Tim Streater]

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.