Установка границы на <цв> на HTML-таблице с угловыми условными классами не работает на сафари

голоса
1

Я пытаюсь сделать столбец простой HTML - таблицы чувствовать себя выбран , давая ему границу всякий раз , когда пользователь нажимает на го элемента с помощью углового:

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

Образец выше был создан и построен с угловым кли 7 и работает безупречно на Chrome, Firefox и Edge. Но на сафари (12) есть некоторые странные поведения. в первую очередь, если я изменю границу .selected класса 1px, он не рисует рамку вокруг колонны на всех. Но даже не обращая внимания, что только первый раз столбец выбран, он получает граничил и Safari игнорирует другие переходы по ссылке й»s, если я как-то не заставить Safari, чтобы изменить размер окна (при уменьшении масштаба / в, изменяя размер консоли разработчика, изменение размера окно вручную, и т.д.).

Что я могу сделать?

Задан 20/10/2018 в 04:59
источник пользователем
На других языках...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more