[whatwg] Web Apps 1.0 - DataGrid

[Ben Meadowcroft]

> Jon Levell wrote
>
> What I'm trying to do is have a large table of information
> where the row and column headers are fixed but the contents
> scroll. It is possible in JavaScript at the moment. For a
> good example (not written by me) see:
> http://www.litotes.demon.co.uk/example_scripts/tableScroll.html
>
> However, if the sizes of the cells change dynamically,
> resizing the "static" cells to match etc. is a lot of work. I
> have a cross-browser version now but I'm still hitting lots
> of little bugs and I'd love it if it was built into the
> browser - it would also nicely degrade in old browsers -
> authors could either link to hacked-together custom solutions
> as we currently do or just let all the cols scroll off the
> page in old browsers.

This kind of presentational information would be best done using CSS and
its "graceful" degradation (theory and practice may clash). Browsers that
understand the rules can apply them while those that don't
will ignore them. Here's a simple example using html and css (embedded css
to make it clearer). It works in browsers that understand the CSS, while
those that don't (such as IE 6) will ignore the styling.

<table>
	<thead>
		<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col
4</th><th style="width:16px; visibility:hidden"></th></tr>
	<thead>
	<tfoot>
		<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col
4</th></tr>
	<tfoot>
	<tbody style="overflow:auto; height:6em; padding-right:20px">
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
		<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col
4</td></tr>
	<tbody>
</table>

> How you would describe this in html is probably for more
> experienced members of the mailing list to sort out but from
> the point of view of implementing this spec it would be
> simpler to only allow one group of columns and one group of
> rows to be frozen which have to be at the left/right or
> top/bottom of the table respectively.

I'd describe it using CSS. Top & bottom is fairly easy to do, whilst left
and right may be a bit more difficult with the current table model.

> If the child of the datagrid was a table then the thead/tfoot
> elements with a special class would make a natural place for
> fixed rows. The fixed columns would be harder, maybe a
> colgroup with a special class.

CSS doesn't allow this level of control using column selectors
unfortunately. See
http://www.w3.org/TR/1998/REC-CSS2-19980512/tables.html#q4 for what you
can do.

--
Ben Meadowcroft
http://www.benmeadowcroft.com/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: smime.p7s
Type: application/x-pkcs7-signature
Size: 3034 bytes
Desc: not available
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20050612/1745a514/attachment-0001.bin>