html page arrange correctly only after reload - html

Question

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

Answer 1

You can just try,
...
<div style = "width: 100%">
<table> ... </table>
</div>
width: 100% gives the same width of the CSS component to the child