html - html页面仅在重新加载后才能正确排列(html page arrange correctly only after reload)

Question

I am working with angular, html and css.

(我正在使用angular，html和css。)

I build a widget that includes a table of 3*3.

(我构建了一个包含3 * 3表的小部件。)

For some reason, in the first upload - the table takes only 50 percent from the widget width.

(由于某种原因，在第一次上载时，表格仅占用窗口小部件宽度的50％。)

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:

(CSS是：)

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

Thanks, Osnat

(谢谢，奥斯纳特)

  ask by Osnat translate from so

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

(width：100％为子级提供相同的CSS组件宽度)