如何將我的圖標放置在表格單元格的右上方？

我試圖在一個表格單元格<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