alternating background colors not working
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
alternating background colors not working
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.
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.
Re: alternating background colors not working
Not all CSS works in PDFs.
I'd suggest setting it up in a Flare table stylesheet, which will work fine in PDFs.
I'd suggest setting it up in a Flare table stylesheet, which will work fine in PDFs.
Re: alternating background colors not working
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.
-
- Senior Propellus Maximus
- Posts: 2632
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: alternating background colors not working
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.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Re: alternating background colors not working
It can add a little more work when putting a table together, but using and will reliably alternate your shading. It worked for me in PDF the last time I tried it
Code: Select all
tbody:nth-child(odd)
Code: Select all
tbody:nth-child(even)
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: alternating background colors not working
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.
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.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: alternating background colors not working
This did not work. I added this to my CSS:AlexFox wrote:It can add a little more work when putting a table together, but usingandCode: Select all
tbody:nth-child(odd)
will reliably alternate your shading. It worked for me in PDF the last time I tried itCode: Select all
tbody:nth-child(even)
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.......
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: alternating background colors not working
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.
table.agari_settings tr:nth-child(odd)
{
background: #FFFFFF;
}
Makes an all-white table. Much better for print, I think, that alternating colors.
Re: alternating background colors not working
You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: alternating background colors not working
Every table I've added in Flare via the Insert > Table feature contains tbody tags.AlexFox wrote:You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default
Re: alternating background colors not working
I think Alex's method wraps every row in tbody, and the colour is applied on the tbody not the tr.chuck_agari wrote:Every table I've added in Flare via the Insert > Table feature contains tbody tags.AlexFox wrote:You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: alternating background colors not working
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.Psider wrote:I think Alex's method wraps every row in tbody, and the colour is applied on the tbody not the tr.chuck_agari wrote:Every table I've added in Flare via the Insert > Table feature contains tbody tags.AlexFox wrote:You need to make sure you've wrapped the relevant rows in <tbody> tags, as this won't be done by default
Re: alternating background colors not working
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.
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.