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
Here is a simplified example:
<style><br />
.tableProgramOverview {width:100%;}<br />
.tableProgramOverview tr td {vertical-align:top;padding:10px 3px;border:1px solid #ddd}<br />
.tableProgramOverview tr td:nth-child(even) {width:60%}<br />
.tableProgramOverview tr td:nth-child(odd) {padding-left:25px;width:40%;font-weight:bold}<br />
</style><br />
<table class="tableProgramOverview"><br />
<tr><br />
<td><br />
column 1<br />
</td><br />
<td><br />
column 2<br />
</td><br />
</tr><br />
</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><br />
.tableProgramOverview {width:100%;}<br />
.tableProgramOverview tr td {vertical-align:top;padding:10px 3px;border:1px solid #ddd}<br />
.tableProgramOverview tr td:nth-child(2) {width:60%}<br />
.tableProgramOverview tr td:nth-child(1) {padding-left:25px;width:40%;font-weight:bold}<br />
</style><br />
<table class="tableProgramOverview"><br />
<tr><br />
<td><br />
column 1<br />
</td><br />
<td><br />
column 2<br />
</td><br />
</tr><br />
</table>
