WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Making a grid of divs appear as a "table"

for

From: Tech
Date: Jul 11, 2008 1:10PM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=us-ascii" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
@list,<br>
<br>
Forgive me, but after a Thunderbird mail client upgrade, my email
filters got completely flummoxed. I&nbsp; never saw any incoming list mail,
and missed all these great responses.&nbsp; So thank you all for them.&nbsp;&nbsp; <br>
<br>
My problem regarding a fixed table header is still not resolved.&nbsp; <br>
<br>
Most solutions to the scrolling header that anyone comes up with is
like this one, which Cristophe points to. <br>
<a class="moz-txt-link-freetext" href="http://danvpeterson.com/aws/sites/my1p/unlocked.html#">http://danvpeterson.com/aws/sites/my1p/unlocked.html#<;/a><br>
<br>
The problem is, that like my solution, his headers are outside the
table completely. He uses DIVS, and I use another table.&nbsp; <br>
<br>
There simply is no other solution that anyone has found.&nbsp; ImaPutz and
others look just great,
until you realize that they ONLY work with a fixed widths, and that
they
completely fail in IE7.&nbsp; A fixed-width table is a more typical data
grid, and there are several solutions for that already.&nbsp; But it's fluid
table widths that are essential for my application, and are really
attractive for many others.<br>
<br>
So the question I still cannot seem to get some consensus about is: &nbsp;
Can such a two-part grid be made <i>reasonably </i>acceptable to
assistive devices by simply hiding the inappropriate elements from
either the reader, or a normal page. <br>
<br>
Here's my demo page, showing the entire working solution with the
"normal" header row hidden, and my fixed header visible.&nbsp; The <br>
body" scrolls under the header, which is the whole point. So is there
anything really wrong with this approach, given that it's the only
cross browser solution that actually works?<br>
<br>
<b><a class="moz-txt-link-freetext" href="http://76.100.0.7:2801/src/z-webpersist/jescrollgrid/demo1min.html">http://76.100.0.7:2801/src/z-webpersist/jescrollgrid/demo1min.html<;/a></b><br>
<br>
<br>
<blockquote
cite="mid: <EMAIL REMOVED> "
type="cite">
<pre wrap="">People have tried this before, but I lost the pointers to the demos
that I had found.
See for example:
* Non-scrolling table header:
<a class="moz-txt-link-rfc2396E" href="http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml">&lt;http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml&;gt;</a>,
* Pure CSS Scrollable Table with Fixed Header:
<a class="moz-txt-link-rfc2396E" href="http://www.imaputz.com/cssStuff/bigFourVersion.html">&lt;http://www.imaputz.com/cssStuff/bigFourVersion.html&;gt;</a>
(found through Scrollable Table:
<a class="moz-txt-link-rfc2396E" href="http://www.456bereastreet.com/archive/200410/scrollable_table/">&lt;http://www.456bereastreet.com/archive/200410/scrollable_table/&;gt;</a>);
this one works in SeaMonkey 1.1, Firefox 1.5, Firefox 2.0.0.14,
Internet Explorer 6, Opera 9.02 on Windows XP;
* Scrolling HTML Table with Fixed Header:
<a class="moz-txt-link-rfc2396E" href="http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/">&lt;http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/&;gt;</a>
(doesn't work in Opera 9.02: the header also scrolls);
I haven't tested the updated version at
<a class="moz-txt-link-rfc2396E" href="http://rcswebsolutions.wordpress.com/2007/02/17/updated-scrolling-html-table-with-fixed-header/">&lt;http://rcswebsolutions.wordpress.com/2007/02/17/updated-scrolling-html-table-with-fixed-header/&;gt;</a>
* there's also a discussion thread at
<a class="moz-txt-link-rfc2396E" href="http://www.webmaster-talk.com/css-forum/114586-variable-width-scrolling-table-fixed-header.html">&lt;http://www.webmaster-talk.com/css-forum/114586-variable-width-scrolling-table-fixed-header.html&;gt;</a>,
where the code from <a class="moz-txt-link-abbreviated" href="http://www.imaputz.com">www.imaputz.com</a> is also discussed;
* and another thread at <a class="moz-txt-link-rfc2396E" href="http://csscreator.com/node/30243">&lt;http://csscreator.com/node/30243&;gt;</a>.


I hope this helps.

Best regards,

Christophe
</pre>
</blockquote>
<br>
</body>
</html>