html - html页面只有在重新加载后才能正确排列
问题描述
我正在使用 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;
}
谢谢,奥斯纳特
解决方案
你可以试试,
...
<div style = "width: 100%">
<table> ... </table>
</div>
width: 100% 将 CSS 组件的相同宽度提供给子组件
推荐阅读
- xcode - 命令行上的 MacOS 公证无法创建身份验证会话
- bash - 为什么 bash 动态变量和字符串连接会混淆/覆盖我的循环输出?
- python - 如何使用漂亮的汤来解析多个身体标签?
- python - Python。根据第二个元素在嵌套列表中计算每个元素的第三个元素的最大值
- sql-server - SQL Server 报告配置使用
- node.js - 谷歌云人才解决方案v4beta1 API无法访问
- android - Android Studio 在编译时出错:INSERT INTO Table 不存在?
- android - 当应用程序未运行时,FCM 显示默认消息而不是自定义消息
- java - JOOQ 使用内联转换器将字符串转换为枚举
- html - How to make multiple ID's for one element