在制造页面，添加材料的时候，可能会碰到这种状况，客户提供的表格数据太宽，把页面划开了，我也碰到这样的题目，当我尽量给表格减肥，发觉还是不行的时候，偶忽然想到了overflow:auto，这个属性。

　　在这个大的数据表分外面套一个div，class是box，页面源码

<div >
<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的宽度。
aut 此为body对象和textarea的默认值。在需要时剪切内容并添加转动条
hidden: 不显露超过对象宽度的内容
scroll: 总是显露横向转动条

overfolw-y与上面overflow-x类似，想要固定垂直高度，出现垂直转动条的话，只要定义高度和overfolw-y的属性就可以了。