Absolute position div in table-cell

HTML & CSS
1

Hi all,

Can someone please help me :frowning: thankyou.

I have a 6 x 6 table say and each table cell is 60 px by 60 px say.

What i want to be able to do is have a div of size 20 by 20 pixels (not in the flow) which will be absolutely positioned in the top-right of each cell.

So i would like this mark-up
<table>
<tbody>
<tr>
<td>A<div class=‘tag’>12</div></td>
<td></td>
…
</tr>
<tr>
<td>…
</tr>
…
</tbody>
</table>

and for the div to be positioned in top right, out of the flow, so the A in the example can be positioned centrally (not affected by div)

IS this possible?

so css might be

td { width : 60px; height : 60px; text-align : center}

td div.tag{???}

Thank you in advance

2

The div.tag would need position:absolute;top:0;right:0;

Though it would need a parent to base it off of, and table cells aren’t generally the best option :). You will need to add another div :). You can do taht by setting position relative on an ancestor


<table>
<tbody>
<tr>
<td>[b]<div class="wrapper">[/b]A<div class='tag'>12</div>[B]</div>[/b]</td>
<td></td>
.....
</tr>
<tr>
<td>.....
</tr>
......
</tbody>
</table>

...

div.wrapper{position:relative;}