[xwiki-users] Formatting tables into viewport with sliders
Hi, I've got a few wiki pages that contain large tables (more columns than will fit across the page and more rows than will fit down the page), after being imported from a spreadsheet. I'd like to restrict the view of such tables to what can be shown in the visible area, with sliders to move around. Is there already a facility to do this, or a simple styling parameter? Thanks, Bryn
Hi Bryn, On 3 Dec 2014 at 06:15:50, Bryn Jeffries ([email protected](mailto:[email protected])) wrote:
Hi,
I've got a few wiki pages that contain large tables (more columns than will fit across the page and more rows than will fit down the page), after being imported from a spreadsheet. I'd like to restrict the view of such tables to what can be shown in the visible area, with sliders to move around. Is there already a facility to do this, or a simple styling parameter?
You should certainly be able to do that using a Skin extension to put custom CSS (if you wish to do that for the whole page or whole wiki): http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial The other option, probably simpler, is to use HTML style values just before your table. For example: (% style=“…html style content here” %) |=head1|=head2 |cell11|cell12 See examples and documentation at http://platform.xwiki.org/xwiki/bin/view/Main/XWikiSyntax#HTables Thanks -Vincent
Vincent wrote:
I'd like to restrict the view of such tables to what can be shown in the visible area, with sliders to move around. Is there already a facility to do this, or a simple styling parameter?
You should certainly be able to do that using a Skin extension to put custom CSS (if you wish to do that for the whole page or whole wiki): http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
The other option, probably simpler, is to use HTML style values just before your table. For example:
(% style=“…html style content here” %) |=head1|=head2 |cell11|cell12
Thanks. I ended up doing: (% style="display: block; max-height: 80vh; overflow:auto" %) |=head1|=head2 |cell11|cell12 Which limited the table size to a proportion of the available viewport height and added scrollbars when the table went oversize. The only real downside for this approach is that the thead won't stick at the top, but this appears to be a CSS conundrum for which there doesn't appear to be a decent solution. Cheers, Bryn
participants (2)
-
Bryn Jeffries -
vincent＠massol.net