You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.
View groupJoin the community to find out what other Atlassian users are discussing, debating and creating.
Hi,
I have a table and I'd love to create a template that shades every other row for increased visibility.
Hi Steffen,
Sorry for the late reply. Well actually, this is not as easy as it seems first, because Flying Saucer, the PDF rendering engine Confluence uses, supports only CSS 2.1 (and not even everything from this spec). So nth-child is not supported (as you mentioned). It's not possible either to apply JavaScript to the intermediate HTML code.
The only way to achieve an nth-child-alike effect is to look at fallbacks for old IE browsers using CSS only. There is only one way that I know of, using the adjacent sibling selector. It's pretty ugly and you might need a log of CSS code if your tables are big. But in general it works fine (I tested it).
/* row 1 */ tr, /* row 3 */ tr + tr + tr, /* row 4 */ tr + tr + tr + tr + tr { background: #ccc; } /* ..repeat as often as necessary.. */ /* row 2 */tr + tr, /* row 4 */ tr + tr + tr + tr, /* row 6 */ tr + tr + tr + tr + tr + tr { background: #fff; } /* ..repeat as often as necessary.. */
Let me know if this helps.
Regards, Felix [Scandio]
Thanks Felix, very good idea. I had given up on the idea of alternating table cells, but this actually works.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Jan!
That's very easy. If you just want it for the default template, create a template like this:
<style> .pocketquery-table tr:nth-child(odd) {background: #ccc} </style> $PocketQuery.template("default")
The example uses the nth-child selector which is compatible with IE > 8, so it should be ok by now.
Look at our article on Templating in PocketQuery if you want to dive in further!
Regards, Felix [Scandio]
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
If you like PocketQuery, we would be very happy about a review at the marketplace :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hello,
I would like that appearance with different row colours for PDF exports. Any chance to realise that even though nth-child() is not supported by the confluence CSS engine?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Are you asking about PDF export in relation to PocketQuery results? Or PDF export in general?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
PDF export in general: Can I create tables in confluence that have alternating row colours when I export them to PDF?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
👋 Hi there, a few of us at Atlassian would love to learn about how you use "space settings" functionality in Confluence. A facelift to the space settings is long overdue and we want to start with im...
Connect with like-minded Atlassian users at free events near you!
Find an eventConnect with like-minded Atlassian users at free events near you!
Unfortunately there are no Community Events near you at the moment.
Host an eventYou're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.