Position a div absolutely inside a tr - css

Question

I have a table which is used for showing excel-like data. I need to absolutely position two icons in the top center of each row--I want to show edit/delete icons when the use hovers the mouse over any row.
When I tried adding a relative position to the TR and an absolute positioning my inner floating div, the css disregarding the relative positioning of the parent td and simply floated to the top of the screen:
http://jsfiddle.net/85aTs/2/
HTML
<table>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
</tr>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
<div class="absolute">
I should be in a row
</div>
</tr>
</table>
CSS:
table, td{
border: 1px solid #000;
}
tr {
position:relative;
}
.absolute {
position: absolute;
top: 0;
right: 0;
border: 1px solid #000;
background-color: yellow;
}
I am aware that this is not valid html as it is currently setup, but how can I achieve what I want without switching over to divs with table display properties?

Answer 1

Here's what I would do:
See working jsFiddle demo
HTML
<table>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
table, td
{
border: 1px solid #000;
}
.icons
{
height: 16px;
text-align: center;
background: #bbb;
}
.checkmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://www.actuary.com/directory/template/default/images/icon_checkmark.gif');
}
.crossmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://researchautism.net/img/rating_icons/crossmark_sm.png');
}
RESULTS