html - 使用 Angular 或 Angular Material 的 HTML 表格单元格内的垂直线和水平双向箭头

Question

我们需要在单元格中间显示一条垂直虚线，垂直线的高度应根据行数增长[垂直线见附图红框2]我们还需要在两条垂直线之间显示一个连接箭头[水平箭头引用红框1]。

我们尝试对垂直线使用 Angular Material 分隔器，但效果不佳。我们尝试创建一个没有 Angular Material 的普通 HTML 表格，并将 CSS 应用于表格、tr、td，但也没有按预期工作我们尝试了以下方法:

.verticalLine  {  
    border-left: thick solid #ff0000;
}

<div class="verticalLine"></div>

例如:2

<mat-divider [vertical]="true"></mat-divider>

示例图片:

Answer 1

成功了!你需要在上面添加 height:100%

<mat-divider [vertical]="true" style="height:100%"></mat-divider>