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

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

第一种情况是表格被英文单词撑破了。
解决办法是在表格的属性里设置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)
}

时间: 2024-10-08 03:02:24

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

phpcms发布与生成内容页面空白的解决办法

phpcms发布与生成内容页面空白的解决办法 2014/10/14 技术文章评论:暂无评论浏览: 想换个CMS来用,所以新装了几个CMS系统,最后选定了PHPCMS.倒不是因为它非常优秀,而是因帝国的那种标签不太喜欢.顺便提一下,帝国CMS的栏目自定义字段,我觉得很好,如果用来做一个分类性的栏目,分类自身的属性可以自定义字段来实现,像一些游戏网站分区就很方便了.还是转回正题,使用PHPCMS创建好栏目,正要添加内容的时候,这时问题来了,弹出的添加内容页一片空白什么也没有.网上查了一下资料,有说是

录制输入富文本框内容无脚本生成解决办法

录制输入富文本框内容无脚本生成解决办法: 1.将富文本框加入到对象库中 2.编写脚本如下 'Browser("通用呼叫中心后台").Page("通用呼叫中心后台_2").Frame("Frame").WebElement("html tag:=p").Object.innerText="nei5555r" 改行为设置富文本框内容Browser("通用呼叫中心后台").Page("

Android SDK Manager无法更新,内容显示不全的解决办法

最近在初学android开发,在更新SDK的时候遇到了麻烦. 发现Extras文件夹下为空,没有内容,包括sdk列表也不全面,更新也没有反应 解决方法: 1.在SDK Manager下Tools->Options打开了SDK Manager的Settings a.在"HTTP Proxy Server"和"HTTP Proxy Port"输入框内填入mirrors.neusoft.edu.cn和80(东软的国内镜像,速度很快,腾讯的镜像速度也挺快的.) b.选

echarts的axisLabel的文字内容过长的解决办法

通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每行显示几个字可以自己设置 axisLabel:{                                interval: 0,                                //rotate:30,                                format

QTP录制脚本时,脚本内容为空的解决办法

在网上百度了一下,大多说的是以下方法: 打开IE,在菜单中选择[工具]/[Internet选项]进入Internet配置界面.选择[程序]/[管理加载项],查看目前加载的ActiveX的情况.当看到存在BHOManager Class并且其状态是"禁用"时,点击"启用"开启这个功能,并保存后退出即可解决问题. 当在管理加载项里找不到BHOManger Class这个加载项时,如果你安装了QTP,那么在C:\WINDOWS\system32下会存在一个叫BHOMana

linux中统计排序的内容含有空白行的解决办法

废话不多说,直接上实例: 文件 sharkyun.log 的内容如下 [[email protected] ~]# cat -n sharkyun.log 1http://www.sharkyun.com/index.html 2http://www.sharkyun.com/index.shtml 3https://post.sharkyun.com/index.html 4https://mp3.sharkyun.com/index.html 5http://www.sharkyun.com

织梦DeDeCms列表分页和内容页分页错位解决办法

文章页分页代码在这里/include/arc.archives.class.php列表页分页/include/arc.listview.class.php 很多入门的站长会碰到这样的问题,织梦的通病,下面秀站网总结了一下织梦的列表页和文章页分页问题,希望可以帮助到大家.主要修改两个文件一个是include/arc.listview.class,一个是修改CSS样式表. 第一,在CSS样式表里面添加如下代码: /*列表分页*/.page_list {padding:3px; margin: 3px

swiper 内容超出纵向滚动 解决办法

.swiper-slide { overflow: auto; }   var swiper = new Swiper('.swiper-container', { direction: 'vertical', }); var startScroll, touchStart, touchCurrent; swiper.slides.on('touchstart', function (e) { startScroll = this.scrollTop; touchStart = e.target

Clipboard.GetImage() Clipboard获取粘贴板内容为null的解决办法

将线程启动模式设置为 sta 单线程 简介 STA:   Single-Thread   Apartment,   中文叫单线程套间.就是在COM库初始化的时候创建一个内存结构,然后让它和调用CoInitialize的线程相关联.这个内存结构针对每个线程都会有一个.支持STA的COM对象只能在创建它的线程里被使用,其它线程如果再创建它就会失败. MTA:   Mutil-Thread   Apartment,中文叫多线程套间.COM库在进程中创建一个内存结构,这个内存结构在整个进程中只能有一个,