How To Overlay A Simple Div Directly On Top Of A Simple Html Table Td?

I have a simple html table where each tr has a td for a label and a td for content. I'm looking for the most correct / efficient way to draw a div over the top of the 'content td'

Solution 1:

Why don't you insert a div into the content td and use position absolute. Like this: http://jsfiddle.net/8RuZe/

td.content {
    position: relative;
}
div.over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

I've tested this method on all major browsers from IE8 to IE11.

Good luck.