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

Question

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

这是我所拥有的:

这就是我想要的:

“想要更多+箭头”是一张图片。如何将它插入两列之间，同时仍保持表格中的固定列宽？

代码如下:

<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;
     }