table-layout属性研究

2017-02-27 本文已影响0人一無月一

默认情况下是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）

格子被赋值后，如果赋值的总值＜表格的总值
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）