title: table row is getting adjusted within the first column
body: <p>I have the following table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;table class="table-alignment table table-striped"&gt;
      &lt;tr class="text text-center"&gt;
        &lt;th&gt;Symbol&lt;/th&gt;
        &lt;th&gt;Quantity&lt;/th&gt;
        &lt;th&gt;Timestamp&lt;/th&gt;
        &lt;th&gt;Amount&lt;/th&gt;
      &lt;/tr&gt;
      &lt;div *ngIf="loading == true" class="loader loader-alignment"&gt;&lt;/div&gt;
      &lt;div *ngIf="loading == false"&gt;
        &lt;tr *ngFor="let s of stats" class="text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}"&gt;
          &lt;td&gt;{{s.tradingsymbol | formatSymbol}}&lt;/td&gt;
          &lt;td&gt;{{s.filled_quantity}}&lt;/td&gt;
          &lt;td&gt;{{s.order_timestamp}}&lt;/td&gt;
          &lt;td&gt;{{s.average_price}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/div&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem here is that the entire tr is rendered in 1st column. How do i fix this?</p>