• 首页
• Css&Xhtml
• JavaScript&Dhtml
• Xml
• Web Design
• about
• blog

table-layout:fixed与auto与表格内换行

说明：

设置或检索表格的布局算法。
对应的脚本特性为tableLayout。
示例：

table { table-layout: auto; }
为了让表格布局固定住，我们需要table-layout:fixed。假设没有fixed，把你的分辨率减小到一定程度，你会发现white-space: nowrap是不会生效的。

技巧：为了使表格能够适应液态布局（liquid layout，即可伸缩性），不建议你为表格设置绝对宽度，使用相对宽度如百分比是不错的选择。另外，把宽度相对固定的内容（比如时间格式）格设置绝对宽度，非固定的内容格不设置任何宽度，只需给予其设置white-space: nowrap，虽然在小分辨率的情况下会溢出，但依据某些观点看来，这比折行更美观。

说明：
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度：

使用 col 或 colGroup 对象的宽度( width )属性信息。

使用表格第一行内的单元格的宽度( width )信息。

依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度，内容将会被换行。假如无法换行，则内容会被裁切。假如此属性被设置为 fixed ，则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了，那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。

注意到以下几点：
1，你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。
2，设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
3，设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个特性对于长表格显示速度及效果来说时非常有用的。可以用来改善表格性能！

对于table元素
IE浏览器 
使用 table-layout:fixed;强制table的宽度,多余内容隐藏

效果：
可以看到width=80并没有起作用，表格被字符撑开了。

效果：
width=80起作用了，但是表格换行了。

效果：width=80起作用了，换行也被干掉了。

效果：不幸发生了，第一个td的nowrap不起作用了

效果：改成百分比，终于搞定了

例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果：把例5放到firefox下面，又ft了

效果：天下终于太平了

效果：nowrap又不起作用了