How to place image over this table and make the position responsive - html

Question

I have placed the image but it breaks when we resize the window.
I want it in the center of the first column which is description below the email service.
I want it to remain in the center all the time.
I have given the td position relative and made the image absolute position. Its relative to the td................................
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: relative">Email Service
<img style="position: absolute; left: 300px; top: 70px;" src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>

Answer 1

Wrap the text and the image inside a div with a flex box property, and then you can center it as you like
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
.flex-b {
display:flex;
align-items:center;
justify-content:center;
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex-b">
<span>Email Service</span>
<img src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</div>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>