I am looking to style cell d with a full yellow background in my HTML code for Outlook display. How can I achieve this?
To clarify, I am using agility HTML pack to make changes to the cell d at runtime while ensuring that the table remains well-formatted. I specifically want to add a yellow background to cell d without altering its parent td class.
Final solution: https://jsfiddle.net/0khjqdh0/
<table class="XXX" >
<tr class="header">
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="d1">
<td>a</td>
<td>b</td>
</tr>
<tr class="d0">
<td>c
</td>
<td>
<div class="special_class"> d </div>
</td>
</tr>
</table>
.XXX table{
border:0px;
border-collapse:collapse;
padding:0px;
}
.XXX tr.header td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
font-weight: bold;
border:1px solid #C0C0C0;
color:#FFFFFF;
background-color:#4F81BD;
border-collapse:collapse;
padding:5px;
}
.XXX tr.d0 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#E1EEF4;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX tr.d1 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#FFFFFF;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX div.special_class {
background-color:yellow;
}