Html 如何按以下方式在表格的单元格中覆盖图像？

我无法在我的HTML表格单元格中以所附照片所示的方式放置图像

我尝试为单元格内的图像创建一个

div

，但这对我来说不起作用，它必须位于边缘并浮动在黄色单元格上方。 此外，我还尝试使用

span

进行测试：

<table class="tg" width='100%' height='90%'>
    <tr>
        <td class="example" style="border-right-color: black;border-right-width: thin;">
            <span>/*image placed here*/</span>
            <span class="name">Example</span>
        </td>
    </tr>
</table>

/*图片放在这里*/
实例

所需的输出：

试试这个例子

。左img{
宽度：50px；
边框右上角半径：10px；
边框右下半径：10px；
}
.举例{
右边框颜色：黑色；
右边框宽度：薄；
位置：相对位置；
}
.img部门{
宽度：50px；
显示：内联块；
背景色：白色；
边界右上角半径：50%；
边框右下半径：50%；
右边填充：10px；
}
.姓名{
文本对齐：居中；
宽度：20%；
位置：绝对位置；
背景颜色：黄色；
边框左上半径：10px；
边框左下半径：10px；
左：50px；
z指数：-1；
身高：100%；
左侧填充：20px；
排名：0；
垂直对齐：中间对齐；
线高：50px；
}

实例