css中table-layout：fixed属性的⽤法
table-layout:fixed 属性的⽤法:
如果想要⼀个table固定⼤⼩，⾥⾯的⽂字强制换⾏(尤其是在⼀长串英⽂⽂本，并且中间⽆空格分隔的情况下)，以达到使过长的⽂字 不撑破表格的⽬的，⼀般是使⽤样式：table-layout:fixed。但是在Firefox下⾯，会有⼀些问题，参考Gmail的⼀些做法，做了⼏个 测试，得出⼀种解决办法。
例1：(IE浏览器)普通的情况结婚红包祝福语
CODE:
<table border="1" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果：
可以看到width=80并没有起作⽤，表格被字符撑开了。
例2：(IE浏览器)使⽤样式table-layout:fixed
CODE:
<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
CODE:
<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
CODE:
<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
CODE:
一会儿的英文<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下⾯，⼜失效了 例7：(Firefox浏览器)在使⽤百分⽐固定td⼤⼩情况下使⽤样式table-layout:fixed与nowrap，并且使⽤div
小学日记200字CODE:
<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
CODE:
<style>
.tbl {table-layout:fixed;}
.td {overflow:hidden;}
</style>
CODE:
<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都可以完美解决页⾯强制换⾏问题的解决⽅案。
来⾃:
怎样制作酸奶
