html - 在带有 Angular 条件类的 HTML 表格上设置边框在 Safari 上不起作用

Question

我试图让一个简单的 HTML 表格的一列感觉像是被选中的，只要用户使用 angular 点击一个元素，就给它一个边框：

app.component.ts ：

import { Component } from '@angular/core' ;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectionArray = [false, false, false];

  changeSelection(index: number): void {
    this.selectionArray = this.selectionArray.map(() => false);
    this.selectionArray[index] = true;
  }
}

app.component.html ：

<table border="1px" cellspacing="0">
  <colgroup>
    <col [class.selected]="selectionArray[0] === true">
    <col [class.selected]="selectionArray[1] === true">
    <col [class.selected]="selectionArray[2] === true">
  </colgroup>
  <thead>
    <tr>
      <th (click)="changeSelection(0)">Firstname</th>
      <th (click)="changeSelection(1)">Lastname</th>
      <th (click)="changeSelection(2)">Age</th>
    </tr>
  </thead>
  <tbody>
      <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
  </tbody>
</table>

app.component.css ：

table {
    border-collapse: collapse;
}
.selected {
    border: 2px double yellowgreen;
}

上面的示例是使用 angular cli 7 生成和构建的，可以在 Chrome、Firefox 和 Edge 上完美运行。但是在 Safari (12) 上有一些奇怪的行为。首先，如果我将 .selected 类的边框更改为 1px，它根本不会在列周围绘制边框。但即使忽略这一点，只有第一次选择一列时，它才会有边框，Safari 会忽略其他点击，除非我以某种方式强制 Safari 调整窗口大小（通过缩小/缩小、更改开发者控制台的大小、调整大小手动窗口等）。

有什么我可以做的吗？

标签： htmlcssangularhtml-tablesafari