title: How to define width of the column in the table dynamically
body: <blockquote>
  <p>[Class.width]=&quot;header.width&quot; This doesn't work.How else can I achieve
  a dyanamically set width of the each column of the table.</p>
  </blockquote>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;th class=&quot;name-center head-color &quot; *ngFor=&quot;let header of tableHeader;let headIndex=index&quot; [class.width]=&quot;header.width&quot;
      &gt;{{header.value}}&lt;/th&gt;
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code>this.tableHeader=[{&quot;name&quot;:&quot;sno&quot;,&quot;value&quot;:&quot;S.No&quot;,&quot;width&quot;:&quot;5%&quot;},
  {&quot;name&quot;:&quot;training&quot;,&quot;value&quot;:&quot;Training&quot;,&quot;width&quot;:&quot;35%&quot;},
  {&quot;name&quot;:&quot;skill&quot;,&quot;value&quot;:&quot;Skill&quot;,&quot;width&quot;:&quot;20%&quot;},
  {&quot;name&quot;:&quot;applicableProficiency&quot;,&quot;value&quot;:&quot;Applicable proficiency&quot;,&quot;width&quot;:&quot;20%&quot;},
  {&quot;name&quot;:&quot;trainingAction&quot;,&quot;value&quot;:&quot;Training Action&quot;,&quot;width&quot;:&quot;20%&quot;}];
  </code></pre>