默认情况下是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长度。
另外: 如果这时有第三个格子,但是没有设置宽度的话,则无法显示出来,另外两个格子仍然按照上面的规则呈现。-
格子内有图片
如果图片的宽度大于格子/表格,格子宽度都会被自动撑开
如果设置了white-space: nowrap;
属性(即文本不换行),格子宽度也会被撑开
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%,则多余的格子会自行分布宽度与高度。而且还存在文本不能撑开单元格但是会超出单元格的情况
格子被赋值后,如果赋值的总值=表格的总值
则按照赋值来分配每个格子的宽度
1)赋值的格子数<当行的格子数
按照上面的情况(1)来处理
2 )赋值的格子数 = 当行格子数
根据赋值来划分
3)赋值的格子数 > 当行格子数
多余的格子将会在超出表格,在表格外显示,但是不会撑破表格
(白色区域为table的width)
- 格子被赋值后,如果赋值的总值>表格的总值
1 )如果赋值是px的话,则格子会完全按赋值来分布,内容会撑开格子
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;