表格的宽度计算是怎么进行的？

Question

相同的表格代码，第一个表有一行，第二个表有多行，其余宽度设置都相同，为何最后出来的宽度不同？
(阅读过css权威指南，这一部分书上写的实在难以理解。查阅网络资料也没有收获)

ps.其实到不是要求它们实现的效果一样，是想理解下这么显示的内部机制原理是什么。

jsfiddle链接 https://jsfiddle.net/fgyxw3fh/1/

--------新增编辑分割线 分析---------

前提
这两个表都是自动布局模型。

表1的渲染步骤分析
1、计算出各列的宽度

列数	列1	列2	列3	列4
最小宽度	64	40	64	64

2、计算出表的宽度
最终表的最小宽度为64*3+40+边框宽度

表2的渲染步骤分析
1、计算出各列的宽度

列数	列1	列2	列3	列4
最小宽度	64	64	64	64

2、计算出表的宽度
最终表的最小宽度为64*4+边框宽度
3、强制设置列2的宽度为40，在此基础上，分别计算各列所占比例，从而分配实际上各列宽是多少，但最终整表的宽度未变。

以上，我分析的不全，也不知道对不对，疑问的就是这个地方，自动布局时表格到底是如何渲染的？？

Answer 1

呃，table宽度用col标签或者colgroup来设置比较好吧...毕竟是专门定义表格列属性的...

在你的table下加如下代码就好了。第一个col表示不设置第一列宽度，第二个col表示设置第二列宽度为40px

<col>  
<col width="40px">

至于你这样写为啥就这样渲染了我也不知道...

Answer 2

每一行的同一列都设置宽度

#r1c2,#r2c2,#r3c2{
  width:40px;
}