Установка границы на <col>для таблицы HTML с условными классами Angular не работает в Safari - PullRequest
Новая
       27

Установка границы на <col>для таблицы HTML с условными классами Angular не работает в Safari

0 голосов
/ 20 октября 2018

Я пытаюсь сделать столбец простой таблицы HTML похожим на selected , задавая ему границу всякий раз, когда пользователь нажимает на элемент th, используя 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 изменить размер окна (уменьшая / уменьшая, изменяя размер консоли разработчика, изменяя размерокно вручную и т. д.).

Могу ли я что-нибудь сделать?

...