通过CSS呈现图像的HTML表格无法正常工作

我有一个HTML表格，它在表格单元格中呈现图像（箭头）。图像显示取决于角度组件中的某些逻辑。显示图像的列彼此相邻。当在同一行上需要显示两个图像时，表格中的格式错误（两个图像都显示在第一列中，表格的剩余单元格向左移动）。如果只显示一个图像，则没有问题。 我怀疑图像的CSS是问题的原因

    <tbody>
    <tr *ngFor="let taPatternDto of taPatternInstrumentResponseDto; index as i">
      <td style="width: 20px" scope="row">{{ i + 1 }}</td>
      <td>{{ taPatternDto.taPatternInstrumentId }}</td>
      <td>{{ taPatternDto.symbol }}</td>
      <td style="width: 180px">{{ taPatternDto.name }}</td>
      <td style="width: 40px">{{ taPatternDto.liquid }}</td>
      <td [class]="getFlagClass(taPatternDto.countryCode)" style="width: 14px"></td>
      <td style="width: 180px">{{ taPatternDto.exchangeName }}</td>
      <td>{{taPatternDto.sector }}</td>

      <!- two-images next to each other -->
      <td [class]="getWatchArrowCssClass(taPatternDto.watch)"></td>
      <td [class]="getBuySellArrowCssClass(taPatternDto.buySell)"></td>

      <td style="width: 180px">{{ taPatternDto.pattern }}</td>
      <td style="width: 30px"><img src="assets/img/chart.png"  height="30" width="30" (click)="displayChart(content, taPatternDto);"/></td>
    </tr>
    </tbody>

---

我认为这正是问题所在：

      <!- two-images next to each other -->
      <td [class]="getWatchArrowCssClass(taPatternDto.watch)"></td>
      <td [class]="getBuySellArrowCssClass(taPatternDto.buySell)"></td>

当两幅图像同时显示时，您将获得一个额外的

标记。我建议做的是：

      <!- two-images next to each other -->
      <td>
        <span [class]="getWatchArrowCssClass(taPatternDto.watch)"></span>
        <span [class]="getBuySellArrowCssClass(taPatternDto.buySell)"></span>
      </td>

使用的标签完全由您决定。我刚才使用了

作为示例

此外，如果您与客户端签署了一些保密协议，以防止您的应用程序信息在全球范围内共享，则可能需要删除一些有关图像的信息。您可以使用skitch模糊图像的某些部分

---

祝你好运

我需要为每个图像列。你在这里建议的是一列两张图片，我认为这不是解决方案。

      <!- two-images next to each other -->
      <td>
        <span [class]="getWatchArrowCssClass(taPatternDto.watch)"></span>
        <span [class]="getBuySellArrowCssClass(taPatternDto.buySell)"></span>
      </td>