更新時(shí)間：2015-02-09如果想要一個(gè)table固定大小，里面的文字強(qiáng)制換行(尤其是在一長(zhǎng)串英文文本，并且中間無(wú)空格分隔的情況下)，以達(dá)到使過(guò)長(zhǎng)的文字不撐破表格的目的，一般是使用樣式：table-layout:fixed。但是在Firefox下面，會(huì)有一些問(wèn)題，參考Gmail的一些做法，做了幾個(gè)測(cè)試，得出一種解決辦法。
如果想要一個(gè)table固定大小，里面的文字強(qiáng)制換行(尤其是在一長(zhǎng)串英文文本，并且中間無(wú)空格分隔的情況下)，以達(dá)到使過(guò)長(zhǎng)的文字不撐破表格的目的，一般是使用樣式：table-layout:fixed。但是在Firefox下面，會(huì)有一些問(wèn)題，參考Gmail的一些做法，做了幾個(gè)測(cè)試，得出一種解決辦法。
例1：(IE瀏覽器)普通的情況
<table border=1 width=80>
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
可以看到width=80并沒(méi)有起作用，表格被字符撐開(kāi)了。
例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瀏覽器)在使用數(shù)值固定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>
不幸發(fā)生了，第一個(gè)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瀏覽器)在使用數(shù)值固定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是一個(gè)在IE和Firefox都可以完美解決頁(yè)面強(qiáng)制換行問(wèn)題的解決方案。
