alternating background colors not working

[chuck_agari]

I have this in my CSS:

table.agari_settings tr:nth-child(odd)
{
background: #FDE3CE;
}

It works splendidly in HTML presentations. PDF target outputs, OTOH, are all over the map. Row background colors usually do not alternate, often appear with just one row with the background color and no others, etc. Neither correctness, nor consistency in its incorrectness. For now, I'm just going to comment this out in the CSS and have all-white tables, but I'd like to know why this is not working.

[NorthEast]

Not all CSS works in PDFs.

I'd suggest setting it up in a Flare table stylesheet, which will work fine in PDFs.

[AlexFox]

I had this problem and I really dislike using tablestyles in Flare, so I opted to use <tbody> tags to group my rows and used css to change the background of each alternate tbody. This worked perfectly in both outputs.

[ChoccieMuffin]

The downside of Alex's approach would be that you have to apply the changes manually any time you add or remove a row from your table.

[AlexFox]

It can add a little more work when putting a table together, but using

Code: Select all

tbody:nth-child(odd)

and

Code: Select all

tbody:nth-child(even)

will reliably alternate your shading. It worked for me in PDF the last time I tried it

[chuck_agari]

Cool beans. Thanks for all the tips. I'll give 'em a try.

I should note that I used this nifty site (https://divtable.com/table-styler/) to create the table styling I wanted. The nth-child CSS for just the one selector is what I got out if it for alternating tables. And while it works fine for rendering in HTML, I guess MadCap's XSL-FO need a bit more specificity.

[chuck_agari]

It can add a little more work when putting a table together, but using

Code: Select all

tbody:nth-child(odd)

and

Code: Select all

tbody:nth-child(even)

will reliably alternate your shading. It worked for me in PDF the last time I tried it

This did not work. I added this to my CSS:

table.agari_settings tbody:nth-child(even)
{
background: #FDE3CE;
}
table.agari_settings tbody:nth-child(odd)
{
background: #FFFFFF;
}

The result in my output was two variants of tables:

One, the background of all table sells is light orange.

Two, the background of the first table cell is light orange and the background of all the rest of the tables cells is white.

Strangely, when I commented out the nth-child selectors completely, I still got the second rendering of all tables, which seems very strange. There is literally no selector in the definitions of the table class that has a background color of anything other than white (although the non-print CSS does.

Wait a minute. idea.......

[chuck_agari]

Yes. Changing the original to this:

table.agari_settings tr:nth-child(odd)
{
background: #FFFFFF;
}

Makes an all-white table. Much better for print, I think, that alternating colors.

[AlexFox]

You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default

[chuck_agari]

You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default

Every table I've added in Flare via the Insert > Table feature contains tbody tags.

[Psider]

You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default

Every table I've added in Flare via the Insert > Table feature contains tbody tags.

I think Alex's method wraps every row in tbody, and the colour is applied on the tbody not the tr.

[chuck_agari]

You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default

Every table I've added in Flare via the Insert > Table feature contains tbody tags.

I think Alex's method wraps every row in tbody, and the colour is applied on the tbody not the tr.

While I suppose that code wold be technically valid (I'm not sure if the spec allows more than one tbody element in a table element), it would be a nightmare to develop and maintain. I want my code clean, not drowning in a quagmire of hacks.

[AlexFox]

You may use multiple tbody elements in a table as long as they are consecutive.

I resorted to using them as I wanted to alternate the background-color of rows that contained a mixture of merged cells and single cells.