[css] table-layout:fixed 屬性的解說，IE、Firefox效果對比詳解

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下面，又ft了

 

例7：(Firefox瀏覽器)在使用百分比固定td大小狀況下使用樣式table-layout:fixed與nowrap,而且使用div

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均可以完美解決頁面強制換行問題的解決方案。