CSS：如何在桌子上放置圖像

Question

我有一個數字表格，我想在數據的邊框邊緣的表格頂部附加一個圖像 。然而，我沒有 想法如何做到這一點，有人可以指出我在正確的方向嗎？

下面是我想達到的目標：

此刻，我有表無輪「箭頭」和「=」圖像。

感謝

以建議下面我已經實現了這個代碼：

<td> 
<img src="images/up.png" alt="increase" height="20" width="20" style="position: relative; left: 47px;"/>&euro;<?php echo $cSalePrice; ?> 
</td> 

爲了給下面的結果：

正如你所看到的箭頭圖像ISN」 t居中的塊和 也文字「€65」已被推低...

有何想法？

好吧，現在試着評論的建議，它已經修復了「65歐元」的微調。 但還是圖像不垂直居中的框：

Answer 1

您的圖片應該有絕對，頂部和左側（或右下角）的位置。它應該是位置相對的。

所以，像這樣：

<td style="position:relative;">&euro;65<img src="..." style="position:absolute; left:30px; top: 3px;"> </td> 

這樣，您就可以相對定位圖像是在TD

而且你應該使用，而不是內嵌代碼

Answer 2

一種解決方案是將<img src="...">在左TD，例如，並給它下面的造型到它右移的其版面位置：

position: relative; 
left: 16px; 

Answer 3

喜歡的東西類。這可能工作。創建一個額外的列，並使寬度爲0.我使用div而不是圖像，但它是相同的。你可以試試here

的CSS

table { 
    margin: 10px; 
} 

table td { 
    border: 1px solid black; 
    padding: 10px; 
    width: 100px; 
} 

table td.thin { 
    position: relative; 
    width: 0; 
    padding: 0; 
    border: none; 
    text-align: center; 
} 

table td.thin div { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    margin-left: -10px; 
    margin-top: -10px; 
    top: 50%; 
    left: 50%; 
    background: red; 
    text-align: center; 
    line-height: 20px; 
    border-radius: 10px; 
} 

和HTML

<table> 
    <tr> 
     <td>r1c1</td> 
     <td class="thin"><div>×</div></td> 
     <td>r1c3</td> 
    </tr> 
    <tr> 
     <td>r2c1</td> 
     <td class="thin"><div>×</div></td> 
     <td>r2c3</td> 
    </tr> 
</table> 

這應確保垂直和水平居中，不會影響到其他細胞。

Answer 4

使表格相對。

然後在te表中添加四個圖像，這些圖像絕對定位並定位到他們各自的角落。例如：

table{position:relative} 
table img.topright{position:absolute;top:0;right:0;} 
table img.bottomleft{position:absolute;bottom:0;left:0;} 

等