table layout fixed屬性解說

2022-05-08 17:12:15 字數 1763 閱讀 3176

[css] table-layout:fixed 屬性的解說,ie、firefox效果對比詳解

新增日期:2007-7-4 8:53:39     【大中小】

table-layout:fixed 屬性的解說

如果想要乙個table固定大小,裡面的文字強制換行(尤其是在一長串英文文字,並且中間無空格分隔的情況下),以達到使過長的文字不撐破**的目的,一般是使用樣式:table-layout:fixed。但是在firefox下面,會有一些問題,參考gmail的一些做法,做了幾個測試,得出一種解決辦法。 

例1:(ie瀏覽器)普通的情況

code:

abcdefghigklmnopqrstuvwxyz 1234567890

效果:可以看到width=80並沒有起作用,**被字元撐開了。

例2:(ie瀏覽器)使用樣式table-layout:fixed

code:

abcdefghigklmnopqrstuvwxyz 1234567890

效果:width=80起作用了,但是**換行了。

例3:(ie瀏覽器)使用樣式table-layout:fixed與nowrap

code:

abcdefghigklmnopqrstuvwxyz 1234567890

效果:width=80起作用了,換行也被乾掉了。 

例4:(ie瀏覽器)在使用數值固定td大小情況下使用樣式table-layout:fixed與nowrap

code:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:不幸發生了,第乙個td的nowrap不起作用了 

例5:(ie瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap

code:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:改成百分比,終於搞定了

例6:(firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap效果:

把例5放到firefox下面,又ft了

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

code:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:天下終於太平了 

例8:(firefox瀏覽器)在使用數值固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div

code:

code:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:nowrap又不起作用了

最終,例7是乙個在ie和firefox都可以完美解決頁面強制換行問題的解決方案。

table layout fixed 屬性的解說

table layout fixed 屬性的解說 如果想要乙個table固定大小,裡面的文字強制換行 尤其是在一長串英文文字,並且中間無空格分隔的情況下 以達到使過長的文字不撐破 的目的,一般是使用樣式 table layout fixed。但是在firefox下面,會有一些問題 firefox下,...

table layout fixed 屬性的解說

table layout fixed 屬性的解說 如果想要乙個table固定大小,裡面的文字強制換行 尤其是在一長串英文文字,並且中間無空格分隔的情況下 以達到使過長的文字不撐破 的目的,一般是使用樣式 table layout fixed。但是在firefox下面,會有一些問題 firefox下,...

DataList控制項屬性全解

datalist控制項 datalist控制項使用模板顯示資料來源中的資料項 屬性說明 alternatingitemstyle 獲取datalist控制項中交替項的樣式屬性。alternatingitemtemplate 獲取或設定datalist中交替項的模板 attributes 獲取web控...