简单的table,难以控制的宽度,请教!保证是您以前没有遇到的问题。
项目中遇到了这个对不齐的table,我是做表头固定用的,抓取真表的表头部分的代码,生成一个新的table,用于悬浮在真的表头之上,到达固定表头的目的,可是生成的新表与真实的表列的宽度不一致,请高手解决,70分不够可以再加。
谢谢高手们,下面是下载代码的链接,我已经把代码整理好了,下载就能运行。下载!
http://download.csdn.net/detail/dystocia/4432595
[解决办法]
有改过来。不过有些细微的没调节完。。快下班了先贴出来吧!
<!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></title><link href="default.css" rel="stylesheet" type="text/css" /><script src="jquery-1.4.1.min.js" type="text/javascript"></script><script src="GridHelper.js" type="text/javascript"></script><style> </style></head><body><div id="DivBody" class="DivBodyScroll" style="width: 1220px; height: 692px;"> <table class="Grid" cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;"> <thead> <tr class="GridHeader"> <th class="GridHeader" align="center" rowspan="2"> 标识 </th> <th class="GridHeader" align="center" colspan="3"> 日期 </th> <th class="GridHeader" align="center" rowspan="2"> 品名 </th> <th class="GridHeader" align="center" rowspan="2"> 规格 </th> <th class="GridHeader" align="center" rowspan="2"> 销量 </th> <th class="GridHeader" align="center" colspan="3"> 本期 </th> <th class="GridHeader" align="center" rowspan="2"> 毛2利率 </th> <th class="GridHeader" align="center" colspan="3"> 毛利率 </th> <th class="GridHeader" align="center" rowspan="2"> 销量同比增长率 </th> <th class="GridHeader" align="center" rowspan="2"> 销售同比增长率 </th> <th class="GridHeader" align="center" rowspan="2"> 毛利同比增长率 </th> <th class="GridHeader" align="center" rowspan="2"> 销量环比增长率 </th> <th class="GridHeader" align="center" rowspan="2"> 销售环比增长率 </th> <th class="GridHeader" align="center" rowspan="2"> 毛利环比增长率 </th> </tr> <tr> <th class="GridHeader" align="center" tdindex="1"> 年度 </th> <th class="GridHeader" align="center" tdindex="2"> 季度 </th> <th class="GridHeader" align="center" tdindex="3"> 月度 </th> <th class="GridHeader" align="center" tdindex="7"> 成本 </th> <th class="GridHeader" align="center" tdindex="8"> 佣金 </th> <th class="GridHeader" align="center" tdindex="9"> 销售 </th> <th class="GridHeader" align="center" tdindex="11"> 本期 </th> <th class="GridHeader" align="center" tdindex="12"> 同期 </th> <th class="GridHeader" align="center" tdindex="13"> 差异 </th> <!--<th class="GridHeader" align="center" tdindex="13"> 差异 </th>--> </tr> </thead> <tbody> <tr class="GridRowR" style=""> <td> 20120101 </td> <td> 2012 </td> <td> 1 </td> <td> 1 </td> <td> 唯嘉能 </td> <td> 1.0g </td> <td style="text-align: right;"> 127885.00 </td> <td style="text-align: right;"> 552960887.86 </td> <td style="text-align: right;"> 1117315403.68 </td> <td style="text-align: right;"> 9881501.59 </td> <td style="text-align: right;"> -394789.95 </td> <td style="text-align: right;"> -4.00 </td> <td style="text-align: right;"> -7.36 </td> <td style="text-align: right;"> 3.36 </td> <td style="text-align: right;"> 25.38 </td> <td style="text-align: right;"> 19.87 </td> <td style="text-align: right;"> 34.92 </td> <td style="text-align: right;"> -55.50 </td> <td style="text-align: right;"> -55.59 </td> <td style="text-align: right;"> 76.79 </td> </tr> <tr class="GridRowR" style="background-color: rgb(250, 250, 250);"> <td> 20120301 </td> <td> 2012 </td> <td> 1 </td> <td> 3 </td> <td> 唯嘉能 </td> <td> 0.5g </td> <td style="text-align: right;"> 865600.00 </td> <td style="text-align: right;"> 12072341.13 </td> <td style="text-align: right;"> 26109411.34 </td> <td style="text-align: right;"> 35942965.53 </td> <td style="text-align: right;"> -2238786.94 </td> <td style="text-align: right;"> -1.23 </td> <td style="text-align: right;"> -4.44 </td> <td style="text-align: right;"> -1.79 </td> <td style="text-align: right;"> 99.96 </td> <td style="text-align: right;"> 93.10 </td> <td style="text-align: right;"> -170.80 </td> <td style="text-align: right;"> 58.19 </td> <td style="text-align: right;"> 56.80 </td> <td style="text-align: right;"> 1.10 </td> </tr> <tr class="GridRowR" style=""> <td> 20120401 </td> <td> 2012 </td> <td> 2 </td> <td> 4 </td> <td> 唯嘉能 </td> <td> 1.0g </td> <td style="text-align: right;"> 289763.00 </td> <td style="text-align: right;"> 6916171.11 </td> <td style="text-align: right;"> 15589296.50 </td> <td style="text-align: right;"> 20562835.10 </td> <td style="text-align: right;"> -1942632.51 </td> <td style="text-align: right;"> -9.45 </td> <td style="text-align: right;"> -7.33 </td> <td style="text-align: right;"> -2.12 </td> <td style="text-align: right;"> 115.07 </td> <td style="text-align: right;"> 90.24 </td> <td style="text-align: right;"> -145.33 </td> <td style="text-align: right;"> 27.25 </td> <td style="text-align: right;"> 16.94 </td> <td style="text-align: right;"> -55.03 </td> </tr> </tbody> <tfoot> <tr class="GridFooter" style=""> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 0.00 </td> <td> 1224.98 </td> <td> 1015.24 </td> <td> 1286.38 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tfoot> </table> <script> function getw(i) { var stl=document.getElementById("GridView1").getElementsByTagName('th'); return stl[i].offsetWidth; } $(function () { GridHeader($("#GridView1")); st=document.getElementById("GridHeaderFake").getElementsByTagName('th'); for(i=0;i<st.length;i++) { var gw=parseInt(getw(i)); st[i].style.width=gw-11+"px"; //alert(st[garry[i]].innerHTML); } }); </script></div></body></html>