对齐表格行旁边的图像

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>

您可以随时将其设置为显示为不是表格的一部分。