イメージをテーブル行の横に並べる

Question

HtmlとCSSを使用して、テーブルの各行の横にイメージを表示したいとします。このような画像 何か：

画像は赤十字の位置に配置される各列の右側に余分なカラム内に作成されません。

これを行う最良の方法は何でしょうか。

Answer 1

：last-childと：after擬似を組み合わせて試してみることができます。

tr td:last-child::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    position: absolute; 
 
    height: 1em; 
 
    width: 1em; 
 
    background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat center; 
 
}

<table> 
 
    <thead> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    </thead> 
 
    <tb> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
    </tb> 
 
</table>

Answer 2

ブランクテーブルヘッダを持つ別の列は、それを行うべきです。

<table style="width:100%"> 
    <tr> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th> </th> -- This is the blank space 
    </tr> 
    <tr> 
    <td>Peter</td> 
    <td>Griffin</td> 
    <td>Image goes here</td> 
    </tr> 
</table> 

いつでも表のように見えるようにスタイルを設定できます。