To make tables Scrollable there are a number of ways to go:
Use CSS
If you are a purist, a pure css approach might appeal to you. Check out:
http://dev.alpicola.com/misc/html/scrolling_table_bodies.html
This even works with the dreaded IE piece of crap. The problem if you are using Genshi templates is that Genshi will remove the "IE Conditional comments in the form of:
<!-- Simulate the effect in Internet Explorer by wrapping the table in a container and making the container scroll --> <!--[if IE]> <style type="text/css">
To genshi, comments are comments and not necessarily preserved we it processes a typical master.html match block.
It's already been pointed out that conditional comments are a danger (borne out by this experience).
| FireFox | OK |
| Opera | OK |
| Safari | OK |
| IE | OK |
Use JavaScript
Another approach is to use a javascript approach. Hmmm. this might be the way I go for some things but I do balk at using a bunch of javascript to do things that the browser should do on its own (with some css guidance).
http://www.webtoolkit.info/scrollable-html-table.html
is such an approach. This requires a line after each table. Doesn't feel right but it looks like the required markup is in the markup (i.e. not in the comments) and can thus survive genshi (and other xml/html processors or filters.
| FireFox | OK |
| Opera | Unviewable (overflow problems |
| Safari | No Scroll |
| IE | OK |
Use Css Hacks
The css approach above using css hacks rather than css conditional comments (see the cmlenz comment) is seen here:
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html
| FireFox | OK |
| Opera | Non-fixed headers |
| Safari | Non-fixed headers |
| IE | OK |
Results
The "Css Hacks" version may not look as clean as the "Pure CSS" version but it better survives processing/filtering of the code (e.g. when used in a template environment.
The Javascript version (or a custom version of it) might the the final winner as JavaScript may be needed since I also have the desire to have SortableTables?.
