是个求助文章:关于table的width问题求解

194 阅读1分钟

遇到个问题,关于 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>