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

patjporter
Posts: 13
Joined: Sat May 22, 2021 6:04 pm

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

Post by patjporter » 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

Dan
Posts: 492
Joined: Mon Feb 03, 2003 10:56 am

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

Post by Dan » 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

Post Reply