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

Question

我无法按照所附照片中的 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>

所需的输出：

Answer 1

尝试这个例子

.left-img{
   width:50px;
    border-top-right-radius:10px;
   border-bottom-right-radius:10px;
}

.example{
   border-right-color:black;
   border-right-width: thin;
   position:relative;
}

.img-div{
   width:50px;
   display:inline-block;
   background-color: white;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
   padding-right:10px;
}

.name{
   text-align:center; 
   width: 20%; 
    position: absolute;
    background-color: yellow;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    left: 50px;
    z-index: -1;
    height: 100%;
    padding-left: 20px;
    top: 0;
    vertical-align: middle;
    line-height: 50px;
}

<table class="tg" width='100%' height='90%'>
  <tr >
    <td class="example"><div class="img-div"> <img class="left-img" src="https://dsonqtq9c1uhr.cloudfront.net/images/global/890/175/cinturato-p7-all-season-plus-technology-1505470082465.png"/> </div><div class="name"  > example
</div>
</td>
</tr>
</table>

My CodePen Example