Expand child over parent padding

Question

I've been trying this for a while and I don't seem to find a solution.
HTML:

<table>
    <tr>
        <td>
            <div>this div has to expand over the td padding</div>
        </td>
    </tr>
</table>

CSS:

table {
    height:100%;
}

td {
    height:100%;
    background: green;
    padding:5px;
}

div {
    min-width:100%;
    height:100%;
    background:yellow;
    float:left;
    white-space:nowrap;
}

I want the div to expand exactly as much as the td but to also expand over the td padding.

Moving the padding to the div element is not a solution since the div has to be 100% height and at least 100% width, the rest of the div's width is overflow:hidden and appears on hover but I try to keep the example as simple as possible so I didn't include that here.

Edit:

@codehorse I've tried your approach but now it appears that the div expands on the whole body so I guess Era is right, relative positioning might not work on td. I could use another wrapper between the td and div but I would like to avoid that if possible. I'm looking for a standard solution on this.

@Era Works perfect Thank you!

Answer 1

Although this is not the right way to do this but if it works for you then use this CSS for div:

 div {
    margin: -5px;
    padding: 5px;
    position: relative;
    }