table

不像div直接设置宽度即可，table中宽度有一套表格布局算法，首先要了解表格中宽度的计算方法才能灵活使用。

表格宽度算法：
table-layout 属性定义 table 用于布局单元格、行、列的算法。

table有两种布局：
1.table-layout: auto;：自动表格布局，列宽度由单元格内容设定（默认）
2.table-layout: fixed;：固定表格布局，列宽由表格宽度和列宽度设定

自动布局单元格的宽度主要由内容长度决定

1.如果没有设置单元格width，单元格最小宽度为内容长度；
2.如果设置了单元格width
·当单元格设定的 width 小于 内容长度，单元格最小宽度为小于 内容长度
·当单元格设定的 width 大于 内容长度，单元格最小宽度为width
·当单元格设定的 width 大于内容长度，且各列单元格设置的width之和大于table总宽，则按width比例设置各列宽度，table宽度不变
·当单元格设定的 width 大于内容长度，且各列单元格设置的width之和小于table总宽，则按width比例设置各列宽度，table宽度不变

固定布局单元格的宽度主要由设置的width决定

1.如果没有设置单元格width，各列宽度均分
2.如果设置了单元格width
·当单元格width之和小于table总宽度，按width设置的比例设置宽度，table宽度不变
·当单元格width之和大于table总宽度，按width设置的比例设置宽度，table宽度会被撑大
注：且只收第一行设置的宽度影响，在其他行设置无效

性能对比：
自动表格布局算法中，表格及单元格宽度由其包含的内容决定，要在整个表格后加载解析完成之后才能最终确定，如果某行的列宽和前面的不一致，则之前绘制好的行也必须重新绘制，因此很低效。

固定表格布局算法中，一旦表格的第一行下载、解析完成，整个表格就可以被渲染，相对于自动布局算法，可以提高渲染速度。

补充一个小技巧：
当设置为固定布局，第一行含有合并单元格，设置第一行的宽度之后，合并单元格下的单元格宽度为均分，单独设置其下的宽度是无效的（因为只有第一行宽度有效），如下图：

可以试一下下面的方法：

    
    
    

在第一行上面添加一行隐藏行，设置为height:0(display：none不行)

效果：

环境：
可以在这里进行尝试
以上是在chrome下的测试

相关参考：

等宽列背后的表格布局算法
关于表格宽度的渲染规则