6

html table width 问题

 2 years ago
source link: https://www.v2ex.com/t/813281
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

V2EX  ›  程序员

html table width 问题

  Alander · 1 天前 · 349 次点击

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK