Oxygen XML Forum

Posted: **Sun Oct 10, 2021 7:17 pm**

Hello,

Can you please tell me how I would:

(a) Alternate shading of rows for contrast...one row no shading, next row, light grey shading, next row no shading, next row light grey shading, etc.?

(b) How would I selectively shade a cell or row with a background of light grey (or any other color)?

Thank you!
Pat

Posted: **Mon Oct 11, 2021 1:50 pm**

You can use the nth-child(odd) selector. For example:

Code: Select all

*[class ~= "topic/tbody"] > *[class ~= "topic/row"]:nth-child(odd){
	background-color: #EDEDED;
}

To selectively set a background color for a row, you can set the DITA outputclass attribute on the element, with a class value that you can
match in the CSS:

Code: Select all

<row outputclass="myClass">
                            <entry> ....

Code: Select all

*[class ~= "topic/tbody"] > *[class ~= "topic/row"][class~="myClass"]{
	background-color:yellow;
}
*[class ~= "topic/tbody"] > *[class ~= "topic/entry"][class~="myClass"]{
	background-color:yellow;
}

Or more generic, to match other elements than rows and cell entries:

Code: Select all

*[class~="different"]{
	background-color:yellow !important;
}

Many regards,
Dan

Oxygen XML Forum

DITA to PDF Using HTML5 and CSS: Table Cell or Row Shading

DITA to PDF Using HTML5 and CSS: Table Cell or Row Shading

Re: DITA to PDF Using HTML5 and CSS: Table Cell or Row Shading