Problem displaying two images inside one cell in HTML table

Question:

I am working with an html table that I would like in one of its cells to be able to display two images, the problem I have at the moment is that both images are together because of the styles that have been applied to them so far. so how can i add a space in the middle of both?

.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">
          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>

Answer:

I think you can solve it like this:

remove the float from the thubnail class and apply a display: flex;
To the img tag separately apply a width and the margin that I mentioned separately to give it a space in all its contour with respect to its parent container
Instead of having 2 div each enclosing an image, leave only one and inside that place the 2 images; since the idea of class is that you can apply the same styles to different elements; then with a container that encompasses both would be more correct I consider
You give the img tag a maximum width of 90% so that it adjusts according to the available viewport space.

Asking to have a result like this:

    <style>
      .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{
      display: flex;
      max-width: 50%;
      box-sizing: border-box;
    }
      img {
        max-width: 90%;
        margin: 2px;
      }
    </style>
    
    <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">
              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">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
              </div>
            </td>
          </tr>
        </tbody>
    </table>

Post Views: 5