> 馆藏中心

需要table出现横向滚动条

来源:cnblogs 编辑:王强

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <title>给table新增水平滚动条</title>  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="this is my page">  <meta http-equiv="content-type" content="text/html; charset=gbk-123">         <style type="text/css" mce_bogus="1">    table th{            white-space: nowrap;        }        table td{            white-space: nowrap;        }        body,table{         font-size:12px;        }  table{         empty-cells:show;          border-collapse: collapse;         margin:0 auto;        }   h1,h2,h3{   font-size:12px;   margin:0;   padding:0;  }  table.tab_css_1{   border:1px solid #cad9ea;   color:#666;  }  table.tab_css_1 th {   background-image: url("th_bg1.gif");   background-repeat:repeat-x;   height:30px;  }  table.tab_css_1 td,table.tab_css_1 th{   border:1px solid #cad9ea;   padding:0 1em 0;  }  table.tab_css_1 tr.tr_css{   background-color:#f5fafe;   height:30px;  }    </style>    </head>    <body>    <div style="overflow: auto; width: 100%;">        <table border="1" class="tab_css_1">             <thead>       <th>序号</th>       <th>地市</th>       <th>区县</th>       <th>门店名称</th>       <th>对应直供客e69da5e887aa3231313335323631343130323136353331333361313233户名称</th>       <th>虚拟账号</th>       <th>门店负责人</th>       <th>联系方式</th>       <th>面积</th>       <th>店面属性</th>       <th>营业人数</th>       <th>月销量</th>       <th>月开卡量</th>       <th>对应渠道督导</th>       <th>是否有营业执照</th>     </thead>     <tr class="tr_css" align="center">                 <td>1</td>     <td>泉州</td>     <td>南安</td>     <td>系统公司</td>     <td>终端门店</td>     <td>林计钦</td>     <td>qz1891234567</td>     <td>1891234567</td>     <td>20</td>     <td>直营店</td>     <td>5</td>     <td>50</td>     <td>40</td>     <td>张三</td>                 <td>是</td>     </tr>     <tr class="tr_css" align="center">                 <td>2</td>     <td>泉州</td>     <td>安溪</td>     <td>安溪铁观音集团</td>     <td>御品仙茶业</td>     <td>林计钦</td>     <td>qz1891234567</td>     <td>1891234567</td>     <td>20</td>     <td>直营店</td>     <td>5</td>     <td>50</td>     <td>40</td>     <td>张三</td>                 <td>是</td>     </tr>        </table>    </div>    </body></html>www.179s.com防采集请勿采集本网。

https://www.cnblogs.com/rxbook/p/8512507.html收获园豆:30table 不設定寬度,父容器設定overflow: auto直接用layui table吧

对网页滚动条的e69da5e6ba9062616964757a686964616f31333264623233控制,在细部上体现了页面的成功之处。特别是首页。如果精心设计的页面,需要在没有滚动条的情况下才能充分的展现,如果没有对滚动条进行很有效的控制,那别人看起来,一定会有很多遗憾。 关于滚动条产生的原因,简单的说明一下,当宽(width)超过了浏览器默认的宽(width)的的范围,就会产生横向滚动条,纵向滚动条产生的原因也是一样的。 关于滚动条的控制,在实现上是这样的 无框架页面的控制:(非常之简单,但未于NC下测试过。那位测试过请告之。) 框架页面:在D4下,按shit+F2(菜单上:window>frames),在frames面板中,选中需要控制滚动条的框架页面,在属性面板上将scroll的性属远为no。源代码实现起来为: 对于更精细的控制,如不出现横向的滚动条,有几种不同的办法:因为,只要width不超过浏览器默认的宽,就不会出现横向的滚动条,所以,只需要做一个width=100%的table,把所有内容都放在里面,而且那些内容的绝对宽度不超过wihtd的宽度,就可以了。但是如果超出了(例如图片的宽度),那样仍会产生滚动条,就要靠css来进一步控制了,代码如下 那样,超出的部份将被掩盖,实现了不出现横向的滚动条。对纵向的控制,也是相同的。 (附:OVERFLOWER---css中的定位属性: overflow 属性值:visible|hidden|scroll|auto 默认值:visible 不适用于百分比值。 overflow属性决定了元素的内容在超越它的宽度和高度限制时,浏览器如何处理。在使用"visible"的情况下,不论宽和高声明为多少,超出部份都要被强制显示;当属性值为"hidden"时,任何超出原先声明的宽和高的部份,都会变得不可见,正好和"visible"相反。设为"auto"时,将按实际情况,提供一组滚动条。最后"scroll"属性值是无论在什么情况,都出现滚动条。) 总的来说,要实现对滚动条的控制,是非常简单的,只需要区分一下是否框架页,然后选用相应的属性就可以了。容易弄错的就是一些朋友在对无框架页面的控制上,也用“scrolling”这个属性。当然,如果是用css来控制,就没有什么问题了。 最后需要强调的一点就是,如果一个页面需要滚动条才能看完的情况下,如果最消了滚动条,将有一部份内容不能被看见,取消滚动条的适用条件是应是“取消后,能看到更完整的内容!”所以,如果控制了滚动条,请写上适用于什么样的分辨率观看,谁也不会奢望做给800*600分辨下看的网页,控制了滚动条后,在640*480的分辨率下,也能取得同样好的效果,<script type="text/javascript"><!--//图片滚动函数function picScroll(pic,direction,n){ var getArr = new Array(); var move; var length; if(n==undefined){ n=1 }else{ n = 2*n-1; } switch(direction) { case 'top': { if(pic[0].offsetHeight<=(1/n)*pic[0].scrollTop) { pic[0].scrollTop -=n*pic[0].offsetHeight }else{ pic[0].scrollTop +=1; } break; } case 'left': { if(pic[0].offsetWidth<=(1/n)*pic[0].scrollLeft) { pic[0].scrollLeft -=n*pic[0].offsetWidth }else{ pic[0].scrollLeft +=1; } break; } case 'right': { break; } case 'bottom': { break; } default: {//默认是left if(pic[0].offsetWidth<=pic[0].scrollLeft) { pic[0].scrollLeft -=pic[0].offsetWidth }else{ pic[0].scrollLeft +=1; } break; } }}//--></script><style>.pic-wap{ height:160px; margin:0; width:650px; margin:0px 0 0 40px; overflow:hidden;}.pic-in{ width:300%;}.pic-wap dl{ float:left; width:105px; height:113px; margin:0px; padding-left: 13px; padding-right: 12px; background-image: url(images/ykt/pic_bj.jpg); height:150px; background-repeat: no-repeat; background-position: center;}.pic-wap dt{ height:40px;width:105px; line-height:40px; text-align:center; font-size:12px; font-weight:bold; color:#555;}.pic-wap dt a{ font-size:12px; font-weight: normal;}</style><div class="pic-wap" id="pic-wap"> <div class="pic-in" id="pic-in"> <div id="picture1"> <dl> <dt> <a href="/index.php?action=showpic&pid=41" title="few"> few </a> </dt> <dd> <a href="/index.php?action=showpic&pid=41" title="few"> <img width="105" height="80" src="/uploadfiles/2011/0113/thumb/thumb_1294885360_0.jpg"> </a> </dd> </dl> <dl> <dt> <a href="/index.php?action=showpic&pid=40" title="1uuyfrwesadf"> 1uuyf<font style="font-size: 12px;">....</font> </a> </dt> <dd> <a href="/index.php?action=showpic&pid=40" title="1uuyfrwesadf"> <img width="105" height="80" src="/uploadfiles/2011/0113/thumb/thumb_1294905400_0.jpg"> </a> </dd> </dl> <dl> <dt> <a href="/index.php?action=showpic&pid=39" title="正式密钥导入暨系统集成商签约636f70793231313335323631343130323136353331333264623232仪式"> 正式密钥导<font style="font-size: 12px;">....</font> </a> </dt> <dd> <a href="/index.php?action=showpic&pid=39" title="正式密钥导入暨系统集成商签约仪式"> <img width="105" height="80" src="/uploadfiles/2011/0111/thumb/thumb_1294714344_0.jpg"> </a> </dd> </dl> <dl> <dt> <a href="/index.php?action=showpic&pid=38" title="我们的事业"> 我们的事业 </a> </dt> <dd> <a href="/index.php?action=showpic&pid=38" title="我们的事业"> <img width="105" height="80" src="/uploadfiles/2011/0111/thumb/thumb_1294714232_0.jpg"> </a> </dd> </dl> <dl> <dt> <a href="/index.php?action=showpic&pid=36" title="为荣誉而工作"> 为荣誉而工<font style="font-size: 12px;">....</font> </a> </dt> <dd> <a href="/index.php?action=showpic&pid=36" title="为荣誉而工作"> <img width="105" height="80" src="/uploadfiles/2011/0111/thumb/thumb_1294713870_0.jpg"> </a> </dd> </dl> </div> <div id="picture2"></div> </div> </div><script>//这是图片展示的脚本startvar pic=$('.new #pic-wap');var pic1 = pic.find('#picture1');var pic2 = pic.find('#picture2');pic2.html(pic1.html());timers=setInterval("picScroll(pic,'left')",scrollSpeed); $('.new #pic-wap').hover( function(){ clearInterval(timers); }, function(){ timers=setInterval("picScroll(pic,'left')",scrollSpeed); });</script>本回答被提问者和网友采纳,看看div的position属性是不是absolute内容来自www.179s.com请勿采集。

本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。本文《需要table出现横向滚动条》转载自cnblogs,版权归原作者所有,若侵权请联系:E-MAIL:513175919@qq.com
违法违规信息请立即联系本网可获得现金奖励,TEL:1-8-2-1-0-2-3-3-3-8-1(电话仅供违法违规信息举报,侵权类信息请EMAIL。)

www.179s.com false 互联网 http://www.179s.com/jsblogcnk/pd/pddvpv.html report 12286 https://www.cnblogs.com/rxbook/p/8512507.html收获园豆:30table 不設定寬度,父容器設定overflow: auto直接用layui table吧

热门图片

经济金融企业管理法律法规社会民生科学教育降生活体育运动文化艺术电子数码电脑网络娱乐休闲行政地区心理分析医疗卫生