table-layout属性研究

默认情况下是auto。如果不设置宽度，则随机分布宽度与高度。

table-layout: auto

• 一行只有单个格子被赋值时
  如果单个格的宽度设计大于表格宽度,则该宽度并不会生效。并且随机分布宽度与高度。
  **eg: **
  table为width:400px;
  td为witdh:1000px;

• 一行有多个格子被赋值时
  如果分别给表格的某一行的单元格赋值。即使赋值大于表格的总宽度，这时会按百分比来分割这一行。
  eg:
  table的width:400px;第一个td为witdh:1000px，第二个td为witdh:1000px。如果在只有2个单元格的情况下，2个单元格是按比例分布。1000/1000+2000=1/3，2000/1000+2000=2/3。则第一个单元格子占该行的1/3长度，第二个单元格占该行的2/3长度。
  另外： 如果这时有第三个格子，但是没有设置宽度的话，则无法显示出来，另外两个格子仍然按照上面的规则呈现。

• 格子内有图片
  如果图片的宽度大于格子/表格，格子宽度都会被自动撑开
  

  （白色区域为table的width）

如果设置了white-space: nowrap;属性（即文本不换行），格子宽度也会被撑开

（白色区域为table的width）

table-layout: fixed

格子被赋值后，如果赋值的总值＜表格的总值
1）赋值的格子数＜当行的格子数
**eg: **这一行一共有3个格子，只有2个格子被赋值。分别是15%,250%,15%。则剩下的位置会被空着

（白色区域为table的width）

2 )赋值的格子数 = 当行格子数
**eg: **这一行一共有3个格子分别是15%,50%,15%。多余出来的20%的宽度则会按15：25：15即3：5：3的比例分别分入3个格子内

3）赋值的格子数 > 当行格子数
eg: 这一行一共有3个格子，但是实际上用了5个单元格，且只有前3个格子被赋值15%,50%,15%，则多余的格子会自行分布宽度与高度。而且还存在文本不能撑开单元格但是会超出单元格的情况

（白色区域为table的width）

格子被赋值后，如果赋值的总值=表格的总值
则按照赋值来分配每个格子的宽度
1）赋值的格子数＜当行的格子数
按照上面的情况（1）来处理

2 )赋值的格子数 = 当行格子数
根据赋值来划分

3）赋值的格子数 > 当行格子数
多余的格子将会在超出表格，在表格外显示，但是不会撑破表格

（白色区域为table的width）

• 格子被赋值后，如果赋值的总值>表格的总值
  1 )如果赋值是px的话，则格子会完全按赋值来分布，内容会撑开格子
  （白色区域为table的width）
  2）如果是百分比，则按格子的宽度直接的比例，按比例分布

如果设置了white-space: nowrap;属性（即文本不换行），格子宽度不会被撑开，但是文字会超出到表格以外

（白色区域为table的width）

总结：####

• 格子被撑开的情况：
  1 ) 在默认情况下，设置了white-space: nowrap;
  2）在默认情况下，单元格中的图片宽度大于单元格的宽度
  3）某些预设格式

  
  
  

  （白色区域为table的witdh）
  4）在设置了table-layout: fixed的情况下，用px为单位赋值，且单元格的总width > table 的width

  
  

• 内容超出了格子的情况：
  1）设置了table-layout: fixed的情况下，还设置了white-space: nowrap;
  

  （白色区域为table的witdh）