DIV加滚动条--转载

今天制作的页面里需要一个表格在有限的空间里最多只显示五行记录，其它的记录通过滚动条来实现浏览。这样上面的表头要单独操作，下面的记录也是单独显示的。表头在带有滚动条的DIV的上面模仿真的表头，只要控制好每个列的列宽与下面的表是一致的就行。实现方法很多，但是我一向喜欢简捷明了。所以我选择了用CSS式样来控制的方法。
 
解决思路： 主要是通过设置元素的CSS属性overflow(包含overflow-x和overflow-y)来实现。
属性：
        visible 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
   
   　　auto 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。
   
   　　hidden 不显示超过对象尺寸的内容。
   
   　　scroll 总是显示滚动条。
 
实例：
1.自动出现横向滚动条，纵向的隐藏： 
   
   <div style="width:400px;height:200px;overflow-y:hidden;overflow-x:auto"> 
     <table><tr><td>..........</td></tr></table><!--这里最好多放些内容才能看到效果-->
   </div>
2.自动出现横向和纵向滚动条：
 
   <div style="width:400px;height:200px;overflow:auto"> 
     <table><tr><td>..........</td></tr></table><!--这里最好多放些内容才能看到效果-->
   </div>
 
注意：要使元素出现横向滚动，必须定义元素的宽；要使元素出现纵向滚动，则须先定义元素的高。如果是在表格中，可能会遇到滚动条是在框里和框外的问题，因为表头是模似的，下面的记录显示超出规定数量则滚动条自动显示在框外致使表格走形。经我测试，在XP系统下条在框外，在vista下面条在框内，为了避免万一，最好在CSS中定义这个DIV的宽度，哪怕是写 width:100% 也是在框内了。不会撑开边框增加横向尺寸。