title: Table heading and table contents are not aligned in Angular using Bootstrap
body: <p>I have created a table with 3 columns and the column headings are &quot;Name&quot;, &quot;Age&quot; and &quot;Deaprtment&quot; and I assingn the values to their respective columns, I have put a condition using span if condition is removed the table heading and content is aligned if the condition is put then column heading and contents are not aligned. in app.component.html file</p>
  <pre><code>&lt;div class=&quot;table-responsive&quot;&gt;
   &lt;table class=&quot;table table-striped&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th class=&quot;p-1&quot; *ngFor=&quot;let column of columns&quot;&gt;
        {{ column }}
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr *ngFor=&quot;let value of newNames&quot;&gt;
      &lt;span *ngIf=&quot;value.name != 'Max'&quot;&gt;
        &lt;td class=&quot;p-1&quot;&gt;
         {{value.name}}
        &lt;/td&gt;
        &lt;td class=&quot;p-1&quot;&gt;
          {{value.age}}
         &lt;/td&gt;
        &lt;td class=&quot;p-1&quot;&gt;
          {{value.department}}
         &lt;/td&gt;
      &lt;/span&gt;
      &lt;span *ngIf=&quot;value.name == 'Max'&quot;&gt;
        &lt;td class=&quot;p-1&quot;&gt;
         {{value.name}}
        &lt;/td&gt;
        &lt;td class=&quot;p-1&quot;&gt;
          {{value.age}}
         &lt;/td&gt;
        &lt;td class=&quot;p-1&quot;&gt;
          {{value.department + &quot; changed to&quot; + &quot; IT&quot;}}
         &lt;/td&gt;
      &lt;/span&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In app.component.ts file I have added the following line of code.</p>
  <pre><code>import { Component } from &quot;@angular/core&quot;;
  
  @Component({
  selector: &quot;app-root&quot;,
  templateUrl: &quot;./app.component.html&quot;,
  styleUrls: [&quot;./app.component.scss&quot;]
  })
  export class AppComponent {
  columns = [&quot;Name&quot;, &quot; Age&quot;, &quot;Department&quot;];
  newNames = [
  {
    name: &quot;John&quot;,
    age: 28,
    department: &quot;Accounting&quot;
  },
  {
    name: &quot;Max&quot;,
    age: 26,
    department: &quot;Sports&quot;
  },
  {
    name: &quot;Rose&quot;,
    age: 24,
    department: &quot;Arts&quot;
  }
  ];
  } 
  </code></pre>
  <p>and in component.scss i have added</p>
  <pre><code> @import &quot;../styles.scss&quot;;
  
  .table thead th {
   vertical-align: top;
   }
  
   th {
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
   color: grey;
   }
  
   table {
   margin: 0;
   font-family: &quot;Lato&quot;;
   font-size: 12px;
   }
  
   .table-responsive {
   min-height: 60px;
   }
  
   .cell {
    max-width: 250px;
   white-space: nowrap;
   overflow: hidden;
   display: inline-block;
   text-overflow: ellipsis;
   }
  
   .table thead th {
   vertical-align: top;
   }
  </code></pre>
  <p>can some one help me how to align the table content with table heading.</p>