- From: Ben Meadowcroft <ben@benmeadowcroft.com>
- Date: Sun, 12 Jun 2005 07:15:18 +0100
> 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.bin>
Received on Saturday, 11 June 2005 23:15:18 UTC