如何在HTML表格的列之间的背景中放置图像？

Question

如何在HTML表格的两列之间插入图像？

以下是我所拥有的：

这就是我想要的：

＆＃34;想要更多+箭头＆＃34;是一个图像。如何在两列之间插入它，同时仍保持表中固定的列宽？

以下是代码：

<table style="width:100%;table-layout:fixed;">
  <tr>
    <th><div class="button style3 step">Step 1</div></th>
    <th><div class="button style3 step">Step 2</div></th>
    <th><div class="button style3 step">Step 3</div></th>
  </tr>
  <tr>
    <td>
        <ul>
            <li>Some</li>
            <li>Text</li>
            <li>Here</li>
        </ul>
    </td>
    <td>
        <ul>
            <li>Some</li>
            <li>Other</li>
            <li>Text</li>
            <li>Here</li>
        </ul>
    </td>
    <td>
        <ul>
            <li>Some</li>
            <li>Here</li>
            <li>As</li>
            <li>Well</li>
        </ul>
    </td>
  </tr>
</table>

它是一个有三列两行的表。

我认为解决方案是在第2步表标题之后添加图片，如下所示：

<th><div class="button style3 step">Step 2</div><img src="image.png"></img></th>

但它不起作用，我不知道如何将图像向右推，即使它跨越下一列。

Answer 1

您可以定位图片。

img.mine {
     position: fixed;
     right: 100px;
     top: 0px;
     z-index: 1;
     }

Answer 2

呵呵，你可以试试这个，给表标签相对attr然后给想要更多+绝对pos att

jsfiddle.net/s085wLdL /

Answer 3

你可以用绝对定位来做。

<table style="width:100%;table-layout:fixed;position:relative;">
<div style="position:absolute;top:0;right:100px;"><img src="image.png"></div>
....
....

您只需更改right:属性即可正确定位。在这种情况下绝对定位的好处是，它不会中断你的桌子的流动。