How would I go about shading every other row?

Jan Rembisch November 12, 2014

Hi,

 

I have a table and I'd love to create a template that shades every other row for increased visibility. 

 

 

4 answers

1 accepted

1 vote
Answer accepted
Felix Grund (Scandio)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 20, 2014

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]

Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 27, 2015

Thanks Felix, very good idea. I had given up on the idea of alternating table cells, but this actually works.

1 vote
Felix Grund (Scandio)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 12, 2014

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]

0 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 13, 2014

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?

Felix Grund (Scandio)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 13, 2014

Are you asking about PDF export in relation to PocketQuery results? Or PDF export in general?

Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 13, 2014

PDF export in general: Can I create tables in confluence that have alternating row colours when I export them to PDF?

0 votes
Jan Rembisch November 12, 2014

Thank you Felix, works like a charm!

Felix Grund (Scandio)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 12, 2014

If you like PocketQuery, we would be very happy about a review at the marketplace :)

Felix Grund (Scandio)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 12, 2014

Oh, and it would be nice if you marked my answer as "accepted".

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events