TableLayout布局总结

Table布局两个属性

1. auto
2. fixed

auto

table默认的自动算法, 布局将基于内容而定, 也就是会统计计算每一列的最长内容宽度，每列宽度占比和内容占比是一致的

当时用colgroup进行宽度设置时

<colgroup>
    <col style="width: 33%">
    <col style="width: 33%">
    <col style="width: 33%">
 </colgroup>

可以看到table的确是按照等比分配的，但是如果设置的宽度为px或者加起来超过总宽度了又会怎样呢？

<colgroup>
    <col style="width: 50%">
    <col style="width: 50%">
    <col style="width: 50%">
 </colgroup>

又或者

<table style="width: 360px;">
	<colgroup>
	    <col style="width: 100px">
	    <col style="width: 50%">
	 	<col style="width: 150%">
  	</colgroup>
  	...
</table>

在auto布局下

1. 当宽度足够的情况，是按比例或者样式设置的一样
2. 超出情况下
   1. 百分比设置优先级大于定值设置，都是定值的话，按比例操作
   2. 顺序越靠前越优先
   3. 在尽量满足所有行的最小宽度下在进行分配，然后按照优先级进行渲染，比如3个都是50%的情况下，在满足最后一列塞满的情况，前面两者进行比例分配

fixed

表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

在fixed布局时，基本能按照设置值进行布局，而且由于布局固定，不需要像auto整个分析之后再进行布局, 渲染速度也能得到提升。

1. 当宽度足够的情况，是按比例或者样式设置的一样
2. 超出情况下
   1. 优先满足宽度设置，挤压其他内容也无所谓
   2. 剩下百分比设置的按照比例分配