title: Angular Transform Scale - Remove Whitespace
body: <p>I am working on project where I need to scale down multiple large tables dynamically. I am achieving this by using transform: scale. Here is a simple version of what I am trying to achieve in stackblitz.</p>
  
  <p><a href="https://stackblitz.com/edit/bkarvangula-teebgl" rel="nofollow noreferrer">StackBlitz - Scaling Demo</a></p>
  
  <p>The issue is when I scale down there is white space at the bottom. I have text and additional tables after this. How do remove this white space? I know this has been asked before but I am struggling to find a working solution especially for angular.</p>
  
  <p><a href="https://i.stack.imgur.com/euywi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/euywi.png" alt="Table"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt;Transform&lt;/h1&gt;
  &lt;button (click)="setScale1(1)"&gt;Original&lt;/button&gt;
  &lt;button (click)="setScale1(0.5)"&gt;Scale 50%&lt;/button&gt;
  &lt;button (click)="setScale1(0.25)"&gt;Scale 25%&lt;/button&gt;
  
      &lt;div style="transform-origin:0 0;" [style.transform]="'scale('+scale1+')'"&gt;
        &lt;table style="width:130%;background-color:#D3D3D3;"&gt;
          &lt;tr&gt;
            &lt;th&gt;Firstname&lt;/th&gt;
            &lt;th&gt;Lastname&lt;/th&gt; 
            &lt;th&gt;Age&lt;/th&gt;
            &lt;th&gt;Sex&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Jill&lt;/td&gt;
            &lt;td&gt;Smith&lt;/td&gt; 
            &lt;td&gt;50&lt;/td&gt;
            &lt;td&gt;F&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Eve&lt;/td&gt;
            &lt;td&gt;Jackson&lt;/td&gt; 
            &lt;td&gt;94&lt;/td&gt;
            &lt;td&gt;F&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Toby&lt;/td&gt;
            &lt;td&gt;Smith&lt;/td&gt; 
            &lt;td&gt;50&lt;/td&gt;
            &lt;td&gt;M&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Tom&lt;/td&gt;
            &lt;td&gt;Jackson&lt;/td&gt; 
            &lt;td&gt;66&lt;/td&gt;
            &lt;td&gt;M&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;I would like this text to be directly after the blue container like when at 100% scale&lt;/div&gt;
      &lt;br&gt;
      &lt;button (click)="setScale2(1)"&gt;Original&lt;/button&gt;
      &lt;button (click)="setScale2(0.5)"&gt;Scale 50%&lt;/button&gt;
      &lt;button (click)="setScale2(0.25)"&gt;Scale 25%&lt;/button&gt;
      &lt;div style="transform-origin:0 0;" [style.transform]="'scale('+scale2+')'"&gt;
        &lt;table style="width:130%;background-color:#D3D3D3;"&gt;
          &lt;tr&gt;
            &lt;th&gt;Company&lt;/th&gt;
            &lt;th&gt;Type&lt;/th&gt; 
            &lt;th&gt;# Of Employees&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;ABC Company&lt;/td&gt;
            &lt;td&gt;Customer&lt;/td&gt; 
            &lt;td&gt;50&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Other Company&lt;/td&gt;
            &lt;td&gt;Customer&lt;/td&gt; 
            &lt;td&gt;4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Delta Force&lt;/td&gt;
            &lt;td&gt;Supplier&lt;/td&gt; 
            &lt;td&gt;100&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Alpha Rig&lt;/td&gt;
            &lt;td&gt;Supplier&lt;/td&gt; 
            &lt;td&gt;33&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;I would like this text to be directly after the blue container like when at 100% scale&lt;/div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import { animate, state, style, transition, trigger } from '@angular/animations';
  /**
   * @title Expansion panel as accordion
   */
  @Component({
    selector: 'expansion-steps-example',
    templateUrl: 'expansion-steps-example.html',
    styleUrls: ['expansion-steps-example.css']
  })
  export class ExpansionStepsExample {
    scale1: string = '1';
    scale2: string = '1';
  
  
    setScale1(value: string): void {
      this.scale1 = value;
    }
    setScale2(value: string): void {
      this.scale2 = value;
    }
  }
  </code></pre>