通过 CSS 渲染图像的 HTML 表格无法正常工作

Question

我有一个 HTML 表格，它在表格单元格中呈现图像（箭头）。图像的显示取决于 Angular 组件中的某些逻辑。显示图像的列彼此相邻。当需要在同一行显示两个图像时，表格中的格式会出错（两个图像都显示在第一列，表格的剩余单元格向左移动）。当只显示一张图像时，则没有问题。 我怀疑图像的 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>

正确的渲染

渲染不正确

CSS

.green-arrow {
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  position:relative;
  display:inline-block;
  width:1.33333333em;
  line-height:1em;
   background-image:url(../../assets/img/arrows/green_arrow_up_16.png);
 }

.red-arrow {
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  position:relative;
  display:inline-block;
  width:1.33333333em;
  line-height:1em;
  background-image:url(../../assets/img/arrows/red_arrow_down_16.png);
}

.orange-arrow-up {
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  position:relative;
  display:inline-block;
  width:1.33333333em;
  line-height:1em;
  background-image:url(../../assets/img/arrows/orange_arrow_up_16.png);
}

.orange-arrow-down {
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  position:relative;
  display:inline-block;
  width:1.33333333em;
  line-height:1em;
  background-image:url(../../assets/img/arrows/orange_arrow_down_16.png);
}

Answer 1

我认为这正是您遇到问题的地方：

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

当您同时显示两个图像时，您将获得一个额外的<td></td> 标签。我建议做的是：

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

使用的标签完全取决于您。我只是以<span> 为例。

此外，如果您已与客户签署了某些 NDA 以防止有关您的应用的信息在全球范围内共享，您可能希望删除有关您的图像的一些信息。您可以使用 Skitch 来模糊图像的某些部分。

祝你好运！