HTML to PDF / DOCX / RTF Java converter library › Forums › PD4ML v3 Archived Forums (Read Only) › HTML/CSS rendering issues › nth-child(odd) and background: not rendering properly › Re: Re: nth-child(odd) and background: not rendering properly
May 16, 2018 at 22:34
#30136
Here is a simplified example:
<style>
.tableProgramOverview {width:100%;}
.tableProgramOverview tr td {vertical-align:top;padding:10px 3px;border:1px solid #ddd}
.tableProgramOverview tr td:nth-child(even) {width:60%}
.tableProgramOverview tr td:nth-child(odd) {padding-left:25px;width:40%;font-weight:bold}
</style>
<table class="tableProgramOverview">
<tr>
<td>
column 1
</td>
<td>
column 2
</td>
</tr>
</table>
The (odd) selector is actually being applied to the 2nd td.
When using nth-child(1) and nth-child(2), things render correctly:
<style>
.tableProgramOverview {width:100%;}
.tableProgramOverview tr td {vertical-align:top;padding:10px 3px;border:1px solid #ddd}
.tableProgramOverview tr td:nth-child(2) {width:60%}
.tableProgramOverview tr td:nth-child(1) {padding-left:25px;width:40%;font-weight:bold}
</style>
<table class="tableProgramOverview">
<tr>
<td>
column 1
</td>
<td>
column 2
</td>
</tr>
</table>
