css - 如何将我的图标放在表格单元格的右上角？

Question

我正在尝试在表格单元格内放置一些图标 <td> ，但结果是它们位于屏幕的右上 Angular (表格单元格之外)。

我的代码的简短版本是这样的:

<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 剧照显示 iconset_16px如果 jsFiddle 中 HTML 窗口右上 Angular 的 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 年代初期，使用表格进行页面布局非常流行且非常简单。但设计师很快就明白，改变布局是一种痛苦。表的使用也有 several more disadvantages .

所以是的，您可以在不使用表格的情况下设计任何东西。

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

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

Answer 1

经过更多测试后，似乎无法定位表格单元格。哪一种是有道理的。但我不是要定位表格单元格本身，而是要定位单元格内的内容。

经过在网络上的更多研究(以及一些无用的辩论)，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>