Currently, I am working with an html table where I want to display two images in one cell. However, the issue I am facing is that both images are appearing together due to the styling applied so far. Is there a way for me to add a space in between the two images?
.text-content {
text-align: justify;
font-weight: bold;
font-size: 10pt;
}
.text-title {
text-align: center;
font-weight: bold;
font-size: 12pt;
color: #000;
}
.thubnail img {
float: left;
max-width: 50%;
box-sizing: border-box;
} <table border="1">
<thead>
<tr>
<td width="8%">Item</td>
<td width="8%">Quantity</td>
<td width="10%">Size</td>
<td width="50%">Description</td>
<td width="10%">P/U</td>
<td width="14%">Total ($.)</td>
</tr>
</thead>
<tbody>
<tr>
<td width="8%" rowspan="2" class="text-content">1</td>
<td width="8%" rowspan="2" class="text-content">3</td>
<td width="10%" rowspan="2" class="text-content">12 x 6</td>
<td width="50%" class="text-title">test description</td>
<td width="10%" rowspan="2" class="text-content">2000</td>
<td width="14%" rowspan="2" class="text-content">6000</td>
</tr>
<tr>
<td rowspan="2" class="text-content">
When it comes to adding a space in between two images within the same cell of an html table, Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim, volutpat sapien tellus cubilia mollis sollicitudin nibh nisi curabitur, nullam semper mi duis erat pellentesque nunc. Quis cursus vulputate auctor habitant quisque nibh facilisi vivamus rutrum cubilia, cras dignissim suspendisse vel condimentum lectus cum mauris integer, aenean luctus augue vitae vestibulum quam ac purus parturient.
<div class="thubnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
</div>
<div class="thubnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
</div>
</td>
</tr>
</tbody>
</table>