自动调整HTML表格列

Question

我正在尝试将以下Mockup中的矩阵映射到表格中。矩阵将实现为Angular 5 Component。

细胞的数量类型可以是非常不同的。下表显示了具有两位数字的单元格。

如果表中的一个单元格具有八位数字，则表格如下所示：

该表由Typescript生成，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是CSS：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何自动调整表格列？

Answer 1

您只需设置表格样式宽度：100％然后表格宽度会自动调整列内容

Answer 2

在表格的CSS部分，确保宽度为100％，表格布局为自动。

 table-layout: auto;
 width: 100%;