防止表格被內容撐破的解決辦法總結

默認狀況下,設定了表格大小,看起來沒什麼問題,但當表格裏裝了不少比表格寬度要寬的內容時就會發現表格天然的被撐大了。

第一種狀況是表格被英文單詞撐破了。
解決辦法是在表格的屬性裏設置style="word-wrap:break-word;"

但其實仍是有問題。當往表格裏裝一長串的英文字母時,表格仍是會被撐破。這就是第2種狀況了
解決辦法是在表格風格屬性裏再加一個屬性。style="word-wrap:break-word;word-break:break-all;"

但還有一種狀況。當往表格裏放一張被表格大得多的圖片時,表格照樣仍是被撐破了。

解決辦法有2種,第一種。把表格的風格設置爲:
css

style="overflow-x:no; word-wrap:break-word; word-break:break-all;TABLE-LAYOUT: fixed;"


記得要爲表格設置寬度大小,但TABLE-LAYOUT: fixed設置了的話,對於表格佈局將會很困難,推薦使用第2種解決辦法。

第二種解決辦法是從圖片自己入手
給圖片的風格屬性設置爲
express

style="max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)"



總結:

要完全防止表格被撐破,能夠在網頁最前面或者css文件裏面加上這樣的CSS設置

佈局

table { word-break:break-all; word-wrap:break-word; } img { max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width) }
相關文章
相關標籤/搜索