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

table-layout : auto | fixed 参数：auto : 　默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢fixed : 　固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度。

设置或检索表格的布局算法。 
对应的脚本特性为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的宽度,多余内容隐藏

---

 

如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情 况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout:fixed。但是在Firefox下面，会有一些问题，参考 Gmail的一些做法，做了几个测试，得出一种解决办法。 
例1：(IE浏览器)普通的情况 

<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果：
可以看到width=80并没有起作用，表格被字符撑开了。
例2：(IE浏览器)使用样式table-layout:fixed 

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果：
width=80起作用了，但是表格换行了。

 例3：(IE浏览器)使用样式table-layout:fixed与nowrap 

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果：width=80起作用了，换行也被干掉了。 
例4：(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap 

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果：不幸发生了，第一个td的nowrap不起作用了 

例5：(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap 

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果：改成百分比，终于搞定了 

例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

效果：把例5放到firefox下面，又ft了 

例7：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div 

<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style><table class=tbl border=1 width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
效果：天下终于太平了

 例8：(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div 

<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>
<table class=tbl border=1 width=80><tr><td width=20 class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
效果：nowrap又不起作用了

最终，例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。