Автоматическая настройка столбца таблицы HTML

Question

Я пытаюсь отобразить матрицу из следующего макета в таблицу. Матрица будет реализована как угловой компонент 5

Значения ячеек имеют номер типа и могут сильно отличаться. В следующей таблице показана ячейка с двузначным номером.

Если в одной ячейке таблицы есть восьмизначное число, таблица будет выглядеть следующим образом:

Таблица генерируется Typescript следующим образом:

<table *ngFor="let table of atService.mockData" >
  <tr *ngFor="let row of table.data; let i = index"  >
    <div>
    <td *ngFor="let cell of row" [ngStyle]= "{'background-color': cell.flag== '0' ? 'yellow' : (cell.flag== '1' ? 'red' : '') }">
     {{cell.value}}
    </td>
  </div>
  </tr>
</table>

Вот CSS:

table {
  border: 1px solid black;
  border-spacing: 0px;
  table-layout: fixed;
}

table td,
 table tr {
  padding: 10px;
  border: 1px solid black;
  border-spacing: 0px;
  text-align: center;
}

Как автоматически настроить столбцы таблицы?

Answer 1

В разделе CSS таблицы убедитесь, что ширина равна 100%, а макет таблицы установлен автоматически.

 table-layout: auto;
 width: 100%; 

Answer 2

Вам просто нужно установить ширину стиля таблицы: 100%, после чего ширина таблицы автоматически подстраивается под содержимое столбца