CSS：テーブルの上にイメージを置く方法

Question

私は数字のテーブルを持っていて、データの境界のエッジの上にテーブルの上に画像 を追加したいと思います。しかし、私は アイデアをこれを行う方法がない、誰かが正しい方向に私を指すことができますか？以下は

は私が達成したいものです。現時点では

私は丸い「矢印」と「=」の画像なしでテーブルを持っています。

おかげ

私はこのコードを実装した下のアドバイスを撮影：あなたは、矢印画像ISN」を見ることができるように

：

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

は、次のような結果を与えることをブロックを中心にして テキスト「65ユーロ」が下に振り下ろされています...

アイデア？

ここでコメント付きの提案を試してみると、「€65」ナッジが修正されました。 しかし、静止画は縦方向に箱にセンタリングされていません。

Answer 1

画像は絶対、上、左（または右下）の位置にする必要があります。 < td>それは相対的な位置でなければなりません。

ので、何かのように：。

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

この方法で、あなたはそれが中だTDに比較的

を画像を配置することができますし、代わりにインラインコード

Answer 2

一つの解決策は、例えば、左のTDで<img src="...">を置き、右のそれをシフトすることに、次のスタイリングを与えることですそのレイアウトの位置：

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

テーブルを相対的に作成します。

次に、絶対に配置され、それぞれの角に配置された4つの画像をテーブルに追加します。例えば：

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

など