防止表格被内容撑破的解决办法总结

Posted 2020-07-25 Xander

默认情况下，设定了表格大小，看起来没什么问题，但当表格里装了很多比表格宽度要宽的内容时就会发现表格自然的被撑大了。

第一种情况是表格被英文单词撑破了。
解决办法是在表格的属性里设置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 { max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width) }