遇到个问题,关于 html 中同时设置 table 元素的 table-layout: fixed; 和 width: 100%;的问题:
实际结果如下: 如果 .container { width: 600px }, 那么
- 如果不设置 width 属性,则 table 的宽度就是 600px
- 如果设置 table 的 width: 100%; 则 table 的宽度是 col 的宽度之和 1920px;
我的疑问是:
- 这个 width: 100% 是怎么计算的?
- 当 width: auto | 100% | 具体像素值; 遇上 table-layout: fixed | auto; 又是怎么计算宽度的?
有什么资料可以提供查阅吗?我现在只知道会有这样的效果,但是不知道为什么,找了挺久资料也没找到,有了解的大佬可以跟我指个路我去看看?
<style>
.container {
width: 600px;
}
table {
table-layout: fixed;
width: 100%; // 这里切换是否设置宽度
}
</style>
<div class="container">
<table class="table">
<col style="width: 30px">
<col style="width: 90px">
<col style="width: 200px">
<col style="width: 200px">
<col style="width: 600px">
<col style="width: 300px">
<col style="width: 500px">
<thead class="thead">
<tr>
<th>
#
</th>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
职业
</th>
<th>
住址
</th>
<th>
兴趣爱好
</th>
<th>
其他
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>