無月

默认情况下是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的情况下，用pc为单位赋值，且单元格的总width > table 的width

  
  
  

  
  

• 内容超出了格子的情况：

  1）设置了table-layout: fixed的情况下，还设置了white-space: nowrap;

  
  （白色区域为table的witdh）