防止表格被內容撐破的解決辦法總結
阿新 • • 發佈：2019-01-05
預設情況下，設定了表格大小，看起來沒什麼問題，但當表格裡裝了很多比表格寬度要寬的內容時就會發現表格自然的被撐大了。
第一種情況是表格被英文單詞撐破了。
解決辦法是在表格的屬性裡設定style="word-wrap:break-word;"
但其實還是有問題。當往表格裡裝一長串的英文字母時，表格還是會被撐破。這就是第2種情況了
解決辦法是在表格風格屬性裡再加一個屬性。style="word-wrap:break-word;word-break:break-all;"
但還有一種情況。當往表格裡放一張被表格大得多的圖片時，表格照樣還是被撐破了。
解決辦法有2種，第一種。把表格的風格設定為：
style="overflow-x:no; word-wrap:break-word; word-break:break-all;TABLE-LAYOUT: fixed;"
記得要為表格設定寬度大小，但TABLE-LAYOUT: fixed設定了的話，對於表格佈局將會很困難，推薦使用第2種解決辦法。
第二種解決辦法是從圖片本身入手
給圖片的風格屬性設定為
style="max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)"
總結：
要徹底防止表格被撐破，可以在網頁最前面或者css檔案裡面加上這樣的CSS設定
table {
word-break:break-all;
word-wrap:break-word;
}
img {
第一種情況是表格被英文單詞撐破了。
解決辦法是在表格的屬性裡設定style="word-wrap:break-word;"
但其實還是有問題。當往表格裡裝一長串的英文字母時，表格還是會被撐破。這就是第2種情況了
解決辦法是在表格風格屬性裡再加一個屬性。style="word-wrap:break-word;word-break:break-all;"
但還有一種情況。當往表格裡放一張被表格大得多的圖片時，表格照樣還是被撐破了。
解決辦法有2種，第一種。把表格的風格設定為：
style="overflow-x:no; word-wrap:break-word; word-break:break-all;TABLE-LAYOUT: fixed;"
記得要為表格設定寬度大小，但TABLE-LAYOUT: fixed設定了的話，對於表格佈局將會很困難，推薦使用第2種解決辦法。
第二種解決辦法是從圖片本身入手
給圖片的風格屬性設定為
style="max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)"
總結：
要徹底防止表格被撐破，可以在網頁最前面或者css檔案裡面加上這樣的CSS設定
table {
word-break:break-all;
word-wrap:break-word;
}
img {
width:expression(this.width > 500 ? "500px" : this.width)
}