html - 在HTML表格的单元格内显示两个图像时出现问题

我正在使用一个html表，我希望在您的一个单元格中能够显示两个图像，目前存在的问题是，到目前为止，两个图像都是按照适用于它们的样式组合在一起的在两者中间添加空格？

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

最佳答案

使用flexbox可以解决。

.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;
  justify-content: space-between;
}

.thubnail img {
  flex: 0 1 49%;
  max-width: 200px;
}

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