CSS解决表格或图片内容将页面撑开的办法

社区服务
高级搜索
猴岛论坛电脑百科CSS解决表格或图片内容将页面撑开的办法
发帖 回复
倒序阅读 最近浏览的帖子最近浏览的版块
1个回复

CSS解决表格或图片内容将页面撑开的办法

楼层直达
紙鶴

ZxID:13342876

等级: 大元帅

举报 只看楼主 使用道具 楼主   发表于: 2011-01-16 0
在制作页面,添加资料的时候,可能会遇到这种情况,客户提供的表格数据太宽,把页面撑开了,我也遇到这样的问题,当我尽量给表格减肥,发现还是不行的时候,偶忽然想到了overflow:auto,这个属性。  在这个大的数据表格外面套一个div,class是box,页面源码
<div class="box">
<table>
......
</table>
</div>

css这样写
.box{width:520px; overflow:auto;}
  css定义了这个div的overflow“auto”的属性,还有就是要给这个div一个适合这个页面的宽度。
  这样,当“box”里面的内容宽度大于css定义的宽度时,就会出现滚动条了。里面的内容可以是表格,也可以是图片等等。
  在上上面overflow:auto的问题中,为了不让内容撑开,我用了
.box{width:520px; overflow:auto;}
  但是这样会出现一个问题,就是横向和竖直滚动条都会出现,因为如果只定义了overflow,竖直滚动条会因为横向滚动条占用的空间而一直出现,后来为了隐藏竖直的滚动条,我这样写
.box{width:520px; overflow:auto;overfolw-y:hidden;}
  隐藏了竖直滚动条,问题虽然解决了,但是换个角度去想,为什么是让它出现了再隐藏,而不是不让它出现。查过了苏沈小雨-样式表中文手册以后发现只要定义overfolw-x的属性就可以了。
.box{width:520px; overfolw-x:auto;}
  如果不超过所定宽度,不显示滚动条,超过了宽度只显示横向滚动条,因为没有对竖直滚动overfolw-y定义,所以竖直滚动条也没有出现。
  语法:
overflow-x: visible | auto | hidden | scroll
 
参数:
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的宽度。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象宽度的内容
scroll: 总是显示横向滚动条

  overfolw-y与上面overflow-x相似,想要固定垂直高度,出现垂直滚动条的话,只要定义高度和overfolw-y的属性就可以了。
本帖de评分: 1 条评分 DB +10
DB+10

我很赞同

゛蝣蕩啲龍っ

ZxID:7865773

等级: 元老
‘燕鸥’是种水鸟,听说,它们会从几千里外,飞回自己的家,而且,是‘情有独钟’,终身不换伴侣 ..

举报 只看该作者 沙发   发表于: 2011-01-17 0
感谢分享
« 返回列表
发帖 回复