html - 通过 CSS 渲染图像的 HTML 表格无法正常工作
问题描述
我有一个 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);
}
解决方案
我认为这正是您遇到问题的地方:
<!- 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来模糊图像的某些部分。
祝你好运!
推荐阅读
- python - 如何使用由几列组成的唯一键进行计数?
- wordpress - 无法访问安装在 Docker 容器中的 Wordpress
- laravel-5 - Laravel 雄辩的 DB 播种器和数组转换
- c# - 将数量分配到桶中 - 不均匀
- java - Java 连续线程执行正在延迟任务(任何其他替代方案)
- php - Laravel 刀片删除字符串限制
- json - 如何更新传递给函数的项目?
- python - pandas Python Series 对象是可变的,因此它们不能在查询方法中进行散列
- python - python在特定段落中搜索单词
- bash - Bash:在执行 bash 之前等待子进程产生