|
|
Posted by Jonathan N. Little on 10/20/07 23:15
Alan Searle wrote:
> Jonathan N. Little wrote:
>> Alan Searle wrote:
>>> I implemented the scrolling tbody solution and, yippee, it worked
>>> perfectly ... under Firefox. Here is the URL ...
>>>
>>> http://alse.load4.net/tabletest/table_test03.html
>>>
>>> But under IE (6.0 SP1), it all goes haywire.
>
>> You've triggered quirks mode, all bets are off!
>
> 'quirks mode'? What does this mean? Are you saying that it simply
> won't work under IE ?
http://www.quirksmode.org/css/quirksmode.html
CSS - Quirks mode and strict mode
http://en.wikipedia.org/wiki/Quirks_mode
Quirks mode - Wikipedia, the free encyclopedia
>
>> What are you really trying to do here. Put up a page with some content
>> that relates to what you are trying to accomplish, there might be a
>> different approach that we better suit.
>
> My aim is very simple: I have reporting data that is in a simple table
> format but is so long that I really need to have static headers so that
> the reader continues to see the column titles as he/she scrolls down.
> There is no fancy presentation. It is as simple as that. I am working
> with client data so I can't post the original content and, anyway, I
> don't think that would help much because this is a fundamental question
> about whether a scrollable table is possible under IE?
>
> My first attempt was to divide up the page (with div tags) and make one
> half scrollable. That worked OK but in some cases (where long text was
> involved) the column widths distorted and dropped out of sync with the
> headers.
>
> Then I was told about the tbody syntax which seemed to be exactly what I
> need. But now this seems to be problematic with IE.
>
> This can probably be done with a script language (javascript) or with
> plug-ins but this would complicate it and what I really need is simple
> HTML (or CSS) synatax that will give me a scrollable table with a fixed
> header.
One way requires 2 tables, a containing div and tweaking but works in
old IE... Note the doctype and all to make page strict and not trigger
quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Fixed Header</title>
<style type="text/css">
table, td, th { table-layout: fixed; }
th { text-align: left; }
table.freeze { width: 25em; }
/* make containing DIV a bit larger for scrollbar */
div.scroll { width: 26.5em; height: 10em; overflow: auto; }
div.scroll table { width: 25em; }
</style>
</head>
<body>
<table class="freeze">
<colgroup><col width="15%"><col><col width="15%"></colgroup>
<tr><th>Col01</th><th>Col02</th><th>Col03</th></tr>
</table>
<div class="scroll">
<table>
<colgroup><col width="15%"><col><col width="15%"></colgroup>
<tr><td>aaa</td><td>the_rain_in_spain_stays_mainly</td><td>ccc</td></tr>
<tr><td>aaa</td><td>the_rain_in_spain_stays_mainly</td><td>ccc</td></tr>
<tr><td>aaa</td><td>the_rain_in_spain_stays_mainly</td><td>ccc</td></tr>
....
more rows
....
</table>
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|