IE6/7/8/火狐/谷歌浏览器，右侧滚动条差异

2024-09-05 12:18:13

字体：大中小

来源：转载

供稿：网友

IE6/7/8/火狐/谷歌浏览器，右侧滚动条差异，主要是对齐问题，虽然仍不是很完美，但已经尽力了，分享出来供参考。

<!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/火狐/谷歌浏览器，右侧滚动条差异</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%">我是标题我是标题我是标题</td>                              <th width="10%">0</th>                              <th width="10%">否</th>                              <th width="10%">未共享</th>                              <th width="10%">0/0</th>                              <th width="10%">编辑</th>                            </tr>                            <tr class="gray">                              <th width="5%"><input type="checkbox" /></th>                              <td width="40%">我是标题我是标题我是标题</td>                              <th width="10%">41</th>                              <th width="10%">否</th>                              <th width="10%">免费共享</th>                              <th width="10%">0/1</th>                              <th width="10%">编辑</th>                            </tr>                            <tr>                              <th width="5%"><input type="checkbox" /></th>                              <td width="40%">我是标题我是标题我是标题</td>                              <th width="10%">14</th>                              <th width="10%">否</th>                              <th width="10%">免费共享</th>                              <th width="10%">0/1</th>                              <th width="10%">编辑</th>                            </tr>                            <tr class="gray">                              <th width="5%"><input type="checkbox" /></th>                              <td width="40%">我是标题我是标题我是标题</td>                              <th width="10%">41</th>                              <th width="10%">否</th>                              <th width="10%">免费共享</th>                              <th width="10%">0/1</th>                              <th width="10%">编辑</th>                            </tr>                            <tr>                              <th width="5%"><input type="checkbox" /></th>                              <td width="40%">我是标题我是标题我是标题</td>                              <th width="10%">14</th>                              <th width="10%">否</th>                              <th width="10%">免费共享</th>                              <th width="10%">0/1</th>                              <th width="10%">编辑</th>                            </tr>                                                                             </table>                                           </div>              </td>          </tr>          </tbody>    </table></body></html>

上一篇：一个鼠标滑过的列表效果

下一篇：鼠标经过换色的JS代码