title: html page arrange correctly only after reload
body: <p>I am working with angular, html and css.
  I build a widget that includes a table of 3*3.
  For some reason, in the first upload - the table takes only 50 percent from the widget width.
  It looks OK only after reload.
  Does someone have an idea what could be the problem?</p>
  
  <pre><code>    &lt;div widget class="card"&gt;
        &lt;div class="card-header"&gt;
          &lt;span&gt;Select service(s)&lt;/span&gt;
          &lt;div class="widget-controls"&gt;
            &lt;a data-widgster="expand" href="#" class="transition"&gt;&lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a data-widgster="collapse" href="#" class="transition"&gt;&lt;i class="fa fa-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a data-widgster="fullscreen" href="#" class="transition"&gt;&lt;i class="fa fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a data-widgster="restore" href="#" class="transition"&gt;&lt;i class="fa fa-compress"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;table id="serviceTable"&gt;
            &lt;tr *ngFor="let eachService of [0,1,2]; let i = index"&gt;
              &lt;td  *ngFor="let j of [0,1,2]" class="service-td" &gt;
                &lt;div&gt;
                  &lt;input name="checkboxes" type="checkbox" (change)="changeListener($event, i+j)"&gt;
                      &lt;span&gt;osnat11111111&lt;/span&gt;
                &lt;/div&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The css is: </p>
  
  <pre><code>.service-td
  {
    table-layout:fixed;
    width:10vw;
    overflow:hidden;
    padding: 0.5vw;
  }
  </code></pre>
  
  <p>Thanks,
  Osnat</p>