在HTML表格的单元格内显示两个图像的问题

问题描述 投票:0回答:1

我正在使用一个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>
html css styles
1个回答
0
投票

使用flexbox可以解决。

© www.soinside.com 2019 - 2024. All rights reserved.