How can I position my icons top right inside table cell?

Question

I'm trying to position some icons inside a table cell <td>, but the result is that they are position top right of the screen (outside of the table cell).

Short version of my code is like this:

<td class="td_name">
  <div class="actions">
    <div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
    <div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
    <div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
  </div>
  <div class="gal_name">
    Some name
  </div>
</td>

Where td_name position is set to relative and action is set to absolute. This should work, but not this time.

What am I missing here? Se full code example on jsFidle.

NOTE

I'm trying to position the action DIV inside the <td class="td_name">.
If your jsFiddle stills shows the iconset_16px divs in the top right corner of the HTML window in jsFiddle, then your example is not working either.

#sim_gallery .defaultList tr td.name {  position: relative; width: 200px; height: 100px; }
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;}

NOTE 2
This is for everyone that is not familiar with the usage of tables.

In the early 90's it was very popular and very simple to use tables for page layout. But designers soon understood that changing layout was a pain in the a**. The use of tables also have several more disadvantages.

So yes, you can design anything without ever using tables.

So when do yo use tables? Tables are normally used for displaying tabular data. It's kind of Excel sheet for the web. My experience is that it's much easier to structure table data, than list elements and div's. So in some cases I use tables knowing that this will not have any negative effects on the website what so ever.

So please, do not start a debate about how bad is is to use tables. Use your energy to help me solve my problem :)

Answer 1

After some more testing, it looks like it's not possible to position a table cell. Which kind of makes sense. But I wasn't trying to position the table cell itself, but the content inside the cell.

After some more research on the web (and some useless debate here), I found this article. This basically gives me the short answer: No, it's not possible.

In their example, they use jQuery. But since I still want to do this using CSS, I came up with an alternative solution.

I simply wrap my content inside a DIV in the table cell, and make sure this DIV is as large as the table cell. Voila, all is good :)

.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft  { float:left!important; }

<table>
<tr>
<td>
 <div class="wrapper">
 <div class="actions">
   <div title="Update" class="floatLeft iconset_16px"></div>
   <div title="Settings" class="floatLeft iconset_16px"></div>
   <div title="delete" class="floatLeft iconset_16px"></div>
 </div>

 <div class="gal_name">
   <a title=" Adventure" href="#"> Adventure</a>
 </div>
 <div>   
</td>
</tr>
</table>

Answer 2

Don't know entirely what you're trying to do, but have you tried setting position: relative on your <td> and then adjusting the position of your icons as needed?

http://jsfiddle.net/Z3kpr/1/