首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

简单的table,难以控制的宽度,请问!保证是您以前没有遇到的有关问题

2012-07-29 
简单的table,难以控制的宽度,请教!保证是您以前没有遇到的问题。项目中遇到了这个对不齐的table,我是做表头

简单的table,难以控制的宽度,请教!保证是您以前没有遇到的问题。
项目中遇到了这个对不齐的table,我是做表头固定用的,抓取真表的表头部分的代码,生成一个新的table,用于悬浮在真的表头之上,到达固定表头的目的,可是生成的新表与真实的表列的宽度不一致,请高手解决,70分不够可以再加。

谢谢高手们,下面是下载代码的链接,我已经把代码整理好了,下载就能运行。下载!
http://download.csdn.net/detail/dystocia/4432595

[解决办法]
有改过来。不过有些细微的没调节完。。快下班了先贴出来吧!

HTML code
<!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>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td> 0.00 </td>        <td> 1224.98 </td>        <td> 1015.24 </td>        <td> 1286.38 </td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</td>        <td>&nbsp;</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> 

热点排行