How to override html td also with padding color?

Question

I wish to make cell d with full yellow background.

How can I do that?

I am targeting the html in outlook display.

http://jsfiddle.net/f2pb227a/

Update 1: actually, I am using agility html pack to change the cell d at runtime and the table is already well formatted, for some reasons, I just wish change the cell d at last step, therefore, I want to use div to insert yellow bg without change it 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;
}

Answer 1

Buddy, please check this - http://jsfiddle.net/afelixj/f2pb227a/4/

.XXX div.special_class {
  background-color:yellow;
  padding: 5px;
  margin: -5px;
}