html table 宽度问题

Question

遇到个问题，关于 html 中同时设置 table 元素的 table-layout: fixed; 和 width: 100%;的问题：

实际结果如下：
如果 .container { width: 600px }， 那么

1. 如果不设置 width 属性，则 table 的宽度就是 600px
2. 如果设置 table 的 width: 100%; 则 table 的宽度是 col 的宽度之和 1920px;

我的疑问是：

1. 这个 width: 100% 是怎么计算的？
2. 当 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>

Answer 1

https://developer.mozilla.org...