如何将我的图标放置在表格单元格的右上方？

我试图在一个表格单元格<td>中放置一些图标，但结果是它们位于屏幕的右上角（表格单元格之外）。如何将我的图标放置在表格单元格的右上方？

短版的我的代码是这样的：

<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>

凡td_name位置设置为相对和action设置为绝对。这应该起作用，但这次不行。

我在这里错过了什么？ Se full code example on jsFidle。

注意

我想给action DIV 内定位的<td class="td_name">。
如果你的jsFiddle stills在jsFiddle的HTML窗口的右上角显示iconset_16px div，那么你的例子也不起作用。

#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;}

注2：
这是大家不熟悉的表的使用。

在90年代初，它非常流行，使用表格进行页面布局非常简单。但设计师很快就明白，改变布局是a **中的一个痛点。桌子的使用也有several more disadvantages。

所以是的，你可以设计任何东西而无需使用表格。

那你什么时候使用表？表格通常用于显示表格数据。这是一种网页的Excel工作表。我的经验是，与列表元素和div相比，构建表格数据要容易得多。所以在某些情况下，我使用表格知道这对网站没有任何负面影响。

所以，请不要开始讨论使用表格有多糟糕。用你能帮助我解决我的问题:)

来源

2012-04-15 Steven

为什么在'table'中使用'div'？ – Sparky 2012-04-15 16:31:05

“这应该是有效的” - 如果只有这种情况总是如此！ :) – Terry 2012-04-15 16:37:11

@ Sparky672因为有另一个名称的div。看到我的示例代码 – Steven 2012-04-15 16:50:13

经过一些更多的测试后，它看起来像是无法定位表格单元格。哪一种是有道理的。但我并没有试图定位表格单元本身，而是单元格内的内容。

经过一些关于网络的研究（以及一些无用的辩论），I found this article。这基本上给了我简短的回答：不，这是不可能的。

在他们的例子中，他们使用jQuery。但是因为我仍然想用CSS来做到这一点，所以我想出了一个替代解决方案。

我只是将我的内容包裹在表格单元格中的DIV中，并确保此DIV与表格单元格一样大。瞧，一切都很好:)

.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>

来源

2012-04-15 17:39:49 Steven