html页面只有在重新加载后才能正确排列

Question

我正在使用 angular、html 和 css。我构建了一个包含 3*3 表格的小部件。出于某种原因，在第一次上传时，表格只占用了小部件宽度的 50%。仅在重新加载后才看起来正常。有人知道可能是什么问题吗？

    <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>

CSS 是:

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

谢谢，奥纳特

Answer 1

你可以试试，

...
<div style = "width: 100%">
<table>  ... </table>
</div>

width: 100% 给 child 相同宽度的CSS组件