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

Question

I have an HTML table which renders images (arrows) in the table cells. The images are displayed depending in some logic in an Angular component. The columns which are displaying the images are located next to each other. When on the same row the two images need to be displayed, the formatting in the table goes wrong (both images are displayed in the first column, and the remaining cell of the table are shifted to the left). when only one image is displayed, then there is no problem. I suspect the CSS of the images is the cause of the problem.

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

Correct rendering

Incorrect rendering

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

I think this is exactly where you are having the problem:

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

You gain an extra <td></td> tag when you have both images showing. What I suggest doing is instead:

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

The tags used is totally up to you. I just used <span> for the example.

Also, you might want to remove some information regarding your images if you have signed some NDA with a client to prevent information about your app from getting shared globally. You can use skitch to blur out certain parts of your image.

Best of luck!