html page arrange correctly only after reload

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?

<div widget class="card">
      <div class="card-header">
        <span>Select service(s)</span>
        <div class="widget-controls">
          <a data-widgster="expand" href="#" class="transition"><i class="fa fa-chevron-down"></i></a>
          <a data-widgster="collapse" href="#" class="transition"><i class="fa fa-chevron-up"></i></a>
          <a data-widgster="fullscreen" href="#" class="transition"><i class="fa fa-expand"></i></a>
          <a data-widgster="restore" href="#" class="transition"><i class="fa fa-compress"></i></a>
        </div>
      </div>
        <table id="serviceTable">
          <tr *ngFor="let eachService of [0,1,2]; let i = index">
            <td  *ngFor="let j of [0,1,2]" class="service-td">
              <div>
                <input name="checkboxes" type="checkbox" (change)="changeListener($event, i+j)">
                    <span>osnat11111111</span>
              </div>
            </td>
            </tr>
        </table>
        <br>
    </div>
  </div>

The css is:

.service-td
{
  table-layout:fixed;
  width:10vw;
  overflow:hidden;
  padding: 0.5vw;
}

Thanks, Osnat