Pdf, change background color of alternating table rows

Synne Fog

Hello, I am generating a pdf from an html file.

This pdf contains a table created by using a <table> tag. I want to change the background color of every alternating row in this table (the rows are created by using ngFor).
So far I have managed to change the background color of the entire table, but the border color did not change so the table were split up into multiple cells. To make this question even better, I cannot remember how I changed the background color..

The question is how do I change the background color of alternate rows?
An alternative solution would be to divide the rows using a border. If i put this

style="border: black solid 1px"

on the <table> tag i get a border around the entire table. However, if I put it on <tr> nothing happens.
Is there any good solution to this?

jan_blaha

https://www.geeksforgeeks.org/how-to-set-alternate-table-row-color-using-css/

Synne Fog

Thank you for the suggestion, unfortunatly I have tried that already

<header>
		<style type="text/css">
			body {
				-webkit-print-color-adjust: exact;
			}

			tr:nth-child(odd) {
				background-color: #0088c0;
			}
		</style>
</header>

<body>
		<table style="margin-top: 45px; font-family: Muli, sans-serif; overflow: visible !important;">
			<thead>
			</thead>
			<tr *ngFor="let result of data.results; let i = index" style="font-size: 12px; break-inside: avoid !important;"
				[ngStyle]="{ height: data.type === 'pdf' ? '45px' : '5px', color: i%2 === 0 ? '#000000' : '#6B6B6B', background-color: i%2 === 0 ? 'white' : 'black'}">
			</tr>
		</table>
	</body>

This is roughly what I have. I have tried what you suggest in the style tag, with no effect.
I have tried what you can see in the tr tag above. It wotks for color, however the background-color you can see here gives me an compolation error (missing expected : ). I have seen that people sometime struggle with the background-color keyword when compiling pdfs so I have also tried the same using "background" and "backgroundColor" (I tried this because fontWeight works whereas font-weight does not). Both of these last suggestions compile, but they have no impact on the pdf

jan_blaha

I recommend trying to produce the correct html the first and then fiddle with pdf. Just switch the recipe to html.
Then it is primarily about troubleshooting html/css which should be easy.