右侧滚动条差异，兼容IE678、Chrome/FireFox

发布时间：2018-08-19 13:40:04 所属栏目：Unix 来源：站长网

导读：右侧滚动条差异，兼容IE678、 Chrome /FireFox！在IE6、IE7中显示正常，均为自适应屏幕宽度列表，当列表显示超过100PX，右侧显示滚动条。并且下边的示例中还实现了CSS表格隔行变色效果。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional/

　　右侧滚动条差异，兼容IE678、Chrome/FireFox！在IE6、IE7中显示正常，均为自适应屏幕宽度列表，当列表显示超过100PX，右侧显示滚动条。并且下边的示例中还实现了CSS表格隔行变色效果。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE6/7/8/火狐/<b>谷歌浏览器</b>，右侧滚动条差异</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{font-family:"宋体";font-size:12px;margin:0;padding:0;} *{padding:0;margin:0;} a:link, a:visited{color:#900; text-decoration:none;} a:hover{color:#900; text-decoration:underline;} .list{margin:0 auto; border-collapse:collapse; line-height:20px;border-bottom:1px solid #999;table-layout:fixed;background:#ccc;} .list td{padding:3px 5px;text-align:left;} .list th{padding:3px 5px;text-align:center;font-weight:normal;} .list #head{background:#ccc;display:inline-table;} .list .gray{background:#f0f0f0;} .list td.nopad{padding:0;} .sublist{overflow:auto;overflow-x:hidden;_width:100%;height:100px;background:#fff;border-top:1px solid #999;} .sublist table{margin:0;border-collapse:collapse;table-layout:fixed;} .sublist table td, .sublist table th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} </style> <script type="text/javascript"> window.onload = function(){ oTable = document.getElementsByTagName('table')[0]; oHead = document.getElementById('head'); oSubTable = document.getElementById('subtable'); var tbWidth = oSubTable.offsetWidth; tbWidth = String(tbWidth); oHead.style.width = tbWidth + "px"; } </script> </head> <body> <table width="100%" class="list"> <tbody> <tr id="head"> <th width="5%"><input type="checkbox" /></th> <td width="40%">标题</td> <th width="10%">点击量</th> <th width="10%">是否存在</th> <th width="10%">共享状态</th> <th width="10%">补充</th> <th width="10%">操作</th> </tr> <tr> <td colspan="7" class="nopad"> <div class="sublist"> <table width="100%" id="subtable"> <tr> <th width="5%"><input type="checkbox" /></th> <td width="40%"><a href="#">我是标题我是标题我是标题</a></td> <th width="10%">0</th> <th width="10%">否</th> <th width="10%">未共享</th> <th width="10%">0/0</th> <th width="10%"><a href="#">编辑</a></th> </tr> <tr class="gray"> <th width="5%"><input type="checkbox" /></th> <td width="40%"><a href="#">我是标题我是标题我是标题</a></td> <th width="10%">41</th> <th width="10%">否</th> <th width="10%">免费共享</th> <th width="10%">0/1</th> <th width="10%"><a href="#">编辑</a></th> </tr> <tr> <th width="5%"><input type="checkbox" /></th> <td width="40%"><a href="#">我是标题我是标题我是标题</a></td> <th width="10%">14</th> <th width="10%">否</th> <th width="10%">免费共享</th> <th width="10%">0/1</th> <th width="10%"><a href="#">编辑</a></th> </tr> <tr class="gray"> <th width="5%"><input type="checkbox" /></th> <td width="40%"><a href="#">我是标题我是标题我是标题</a></td> <th width="10%">41</th> <th width="10%">否</th> <th width="10%">免费共享</th> <th width="10%">0/1</th> <th width="10%"><a href="#">编辑</a></th> </tr> <tr> <th width="5%"><input type="checkbox" /></th> <td width="40%"><a href="#">我是标题我是标题我是标题</a></td> <th width="10%">14</th> <th width="10%">否</th> <th width="10%">免费共享</th> <th width="10%">0/1</th> <th width="10%"><a href="#">编辑</a></th> </tr> </table> </div> </td> </tr> </tbody> </table> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济宁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!