hwkj.jquery.chromatable.js锁定表头竖线对齐问题

自己写了个Jquery插件，是锁定表头的。锁定是没问题了，但是竖线对齐问题让我很头疼，唉。表格的宽度和每个单元格的长度我都处理了啊，为毛还不行呢？请大侠帮忙看看，/*
* 功能:     当滚动表格时，锁定表格的表头
* 开发人:   周峰
* 开发时间: 2013-4-26
* 思路:     创建表头的副本，并绝对定位，固定于容器顶部
* 调用方法: $("#yourTableID").chromatable({
width: "100%", //宽度可为白分比或象素
height: "400px",
divCssName: "scrolling_inner
}) }
* 说明:     yourTableID为要固定表头的表格ID
* 注意事项: 1.表格必须有thead和tbody;2.必须给scrolling_inner定义样式表，边框不可缺少 3.注意页面W3C声明前不能加html注释，否则固定不了（IE的BUG）,如<!--这里是注释-->
*/
(function($) {
    $.chromatable =
    {
        //默认设置
        defaults:
        {
            //宽度可为白分比或象素
            width: "900px",
            height: "300px",
            divCssName: "scrolling_inner"/*滚动条样式*/,
            HeadCellTag: "td"/*表头单元格标签,th或者td,不区分大小写*/
        }
    };    $.fn.chromatable = function(options) {        var optionsNew = $.extend({}, $.chromatable.defaults, options);        return this.each(function() {            var $this = $(this);
            var $uniqueID = $(this).attr("ID") + ("wrapper");            //如果未创建固定表头
            if ($("#" + $uniqueID).length == 0) {
                $(this).wrap('<div class="scrolling_outer"><div id="' + $uniqueID + '"></div></div>');                $(".scrolling_outer").css('position', 'relative').addClass(optionsNew.divCssName); //最外层DIV相对定位
                $("#" + $uniqueID).css({ 'overflow': 'auto', 'height': optionsNew.height });                if (optionsNew.width.indexOf('%') != -1 && optionsNew.width != "100%")//如果设置宽度为百分数，并且不是100%
                {
                    $("#" + $uniqueID).parent("div.scrolling_outer").css('width', optionsNew.width);//外部div宽度设置为给定比例
                    $("#" + $uniqueID).css('width', '100%');//内部宽度100%
                }
                else
                    $("#" + $uniqueID).css('width', optionsNew.width);                //创建表头副本并绝对定位
                $(this).before($('<div/>').append($(this).clone().attr("id", "").addClass("_thead")).css(
    {
        'display': 'block',
        'position': 'absolute',
        'top': '0px',
        'left': '0px'
    }
    ))
                $('._thead').children('tbody').remove();                //如果宽度自适应，则调用窗口的大小改变事件自动调整
                if (options.width.indexOf('%') != -1 || "auto") {
                    $(window).resize(function() {
                        setWidth($this, optionsNew);
                    });
                }
            }
            else {//固定表头创建后如果有新的设置则应用新的设置，如果没有还是用原来的
                if (options.height != null)
                    $("#" + $uniqueID).css('height', options.height);                if (options.width != null)
                    $("#" + $uniqueID).css('width', options.width);                if (options.divCssName != null)
                    $("#" + $uniqueID).addClass(options.divCssName);
            }            setWidth($this, optionsNew);        });
    }
    // 动态控制表格的宽度对应固定表头的宽度
    function setWidth($this, options) {
        //固定表头对象
        $curr = $this.prev();
        var $uniqueID = $this.attr("ID") + ("wrapper");        if ($this.height() > $("#" + $uniqueID).height())//出滚动条了
            $this.add($curr).width($("#" + $uniqueID).width() - 17);
        else
            $this.add($curr).width($("#" + $uniqueID).width());
     
        //使固定表头的单元格线和原表格的竖线对齐（单元格长度相等）
        $("thead:eq(0)>tr " + options.HeadCellTag, $curr).each(function(i) {        $(this).width($("thead:eq(0)>tr " + options.HeadCellTag + ":eq(" + i + ")", $this).width());        });
    };
})(jQuery);html, body{    font-size: 12px;    margin: 0px;    height: 100%;  font-family: "微软雅黑" , "宋体" , Arial, sans-serif;    padding: 0;}
table {
 
  border-collapse: collapse;
  empty-cells:show;
}table td {
border:1px solid blue;
font-size:12px;
padding:7px 5px;
white-space: nowrap;}
table thead td {
background-color: #0fb5e7;
font-size:13px;
font-weight:bold;
padding:8px 5px;
text-align:center;
color:#ffffff;}
div.scrolling_inner
{
    border:solid 1px skyblue;
    }

解决方案 »

  1.   

    <!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>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
        <title>Untitled Document</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>    <script type="text/javascript" src="hwkj.jquery.chromatable.js"></script>    <script type="text/javascript">
            var h = "200px";
            function aaa() {
                $("#yourTableID").chromatable({                width: "100%", // specify 100%, auto, or a fixed pixel amount
                    height: h
                })
            }
            $(document).ready(function() {
                aaa();
                $(window).resize(function() {
                    h = $(window).height() - 100;
                    $("#yourTableID").chromatable({
                        height: h
                    })
                });
            });

    </script></head>
    <body>
          <table  border="0" cellspacing="0" cellpadding="0" class="TabBk" id="yourTableID">
                                <thead>
                                    <tr class="trHead">
                                        <td width="45">
                                            序号
                                        </td>
                                        <td >
                                            井号
                                        </td>
                                        <td width="150">
                                            汉字井号
                                        </td>
                                        <td width="80">
                                            设计井别
                                        </td>
                                        <td width="100">
                                            井型
                                        </td>
                                        <td width="85">
                                            开钻日期
                                        </td>
                                        <td width="85">
                                            完钻日期
                                        </td>
                                        <td width="60">
                                            完钻井深<br />
                                            (m)
                                        </td>
                                        <td width="85">
                                            投产日期
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                        
                                                                       <tr class="tr" bgcolor='#ffffff' id="DXX68P3">
                                <td align="center" width="45">
                                    6
                                </td>
                                <td align="left">
                                    <label class="lbl_jh" style="cursor: pointer;" for="rd6">
                                        DXX68P3</label>
                                </td>
                                <td align="left" width="150">
                                    
                                </td>
                                <td align="left" width="80">
                                    采油井
                                </td>
                                <td align="left" width="100">
                                    水平井(单井)
                                </td>
                                <td align="center" width="85">
                                    2008-05-14
                                </td>
                                <td align="center" width="85">
                                    2008-05-23
                                </td>
                                <td align="right" width="60">
                                    1756
                                </td>
                                <td align="center" width="85">
                                    2008-06-01
                                </td>
                            </tr>
                        
                                                    <tr class="tr" bgcolor='#F3F4E6' id="XHH31-C35">
                                <td align="center" width="45">
                                    11
                                </td>
                                <td align="left">
                                    <label class="lbl_jh" style="cursor: pointer;" for="rd11">
                                        XHH31-C35</label>
                                </td>
                                <td align="left" width="150">
                                    
                                </td>
                                <td align="left" width="80">
                                    采油井
                                </td>
                                <td align="left" width="100">
                                    侧钻井
                                </td>
                                <td align="center" width="85">
                                    2008-06-24
                                </td>
                                <td align="center" width="85">
                                    2008-07-10
                                </td>
                                <td align="right" width="60">
                                    2451
                                </td>
                                <td align="center" width="85">
                                    2008-07-01
                                </td>
                            </tr>
                        
                                                               <tr class="tr" bgcolor='#ffffff' id="XLA102X34">
                                <td align="center" width="45">
                                    32
                                </td>
                                <td align="left">
                                    <label class="lbl_jh" style="cursor: pointer;" for="rd32">
                                        XLA102X34</label>
                                </td>
                                <td align="left" width="150">
                                    
                                </td>
                                <td align="left" width="80">
                                    采油井
                                </td>
                                <td align="left" width="100">
                                    定向井(单井)
                                </td>
                                <td align="center" width="85">
                                    2008-07-26
                                </td>
                                <td align="center" width="85">
                                    2008-08-07
                                </td>
                                <td align="right" width="60">
                                    2390
                                </td>
                                <td align="center" width="85">
                                    2008-08-01
                                </td>
                            </tr>
                        
                            <tr class="tr" bgcolor='#F3F4E6' id="WJW664-4">
                                <td align="center" width="45">
                                    33
                                </td>
                                <td align="left">
                                    <label class="lbl_jh" style="cursor: pointer;" for="rd33">
                                        WJW664-4</label>
                                </td>
                                <td align="left" width="150">
                                    
                                </td>
                                <td align="left" width="80">
                                    采油井
                                </td>
                                <td align="left" width="100">
                                    直井(单井)
                                </td>
                                <td align="center" width="85">
                                    2008-06-17
                                </td>
                                <td align="center" width="85">
                                    2008-07-03
                                </td>
                                <td align="right" width="60">
                                    2713
                                </td>
                                <td align="center" width="85">
                                    2008-08-01
                                </td>
                            </tr>
                        
                          
                        
                            </tbody> </table></body>
    </html>
      

  2.   

    骚年人，还写插件来对付这个，。。我这里有个纯CSS实现的，不过只能固定宽度，你可以看一下，结合自己的插件，通过JS设置宽度就可以了。
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            .table_container{border:2px solid #3578B4;width:885px;height:300px;margin:0 auto;}
            .table_container table{width:100%;border-collapse: collapse;}
            .table_container table tr td,.table_container table tr th {border:1px solid #D7ECFF;border-left:none;border-top:none;text-align:center;}
            .table_container table tr th {height:30px;line-height:30px;background:#EFF9FF;font-size:14px;}
            .table_container table tr td{height:30px;line-height:30px;color:#616161;font-size:15px;}
            .table_content{height:265px;overflow-y:auto;overflow-x:hidden;}
        </style>
    </head>
    <body>
        <div class="table_container">
            <table class="table_header">
                    <clogroup>
                    <col width="130px"></col>
                    <col width="65px"></col>
                    <col width="225px"></col>
                    <col width="235px"></col>
                    <col width="75px"></col>
                    <col></col>
                    </colgroup>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>城市</th>
                    <th>身高</th>
                    <th>体重</th>
                </tr>
            </table>
            <div class="table_content">
                <table>
                    <clogroup>
                    <col width="130px"></col>
                    <col width="65px"></col>
                    <col width="225px"></col>
                    <col width="235px"></col>
                    <col width="75px"></col>
                    <col></col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>20</td>
                            <td>北京</td>
                            <td>175</td>
                            <td>70</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
    </html>
    说到底就是利用col来定宽度，最后一个col不要设置宽度，这样出现滚动条的时候就不会变形了。要是宽度不定的话可以在每次表格加载完之后，把表内容第一行的td的宽度都取出来挨个给col加上。 
      

  3.   


    唉，对你无语了，你这样的代码我早就研究过了（网上基本css都是这样的），在搜狗高速模式下根本锁定不了。
    期待大侠的出现。
      

  4.   


    唉，对你无语了，你这样的代码我早就研究过了（网上基本css都是这样的），在搜狗高速模式下根本锁定不了。
    期待大侠的出现。我说你看过代码没？没看过代码别在这乱说，你跟我说锁不住，开什么玩笑？头部跟body压根就是2个table说锁不了？你到底仔细看了没有？？
      

  5.   


    唉，对你无语了，你这样的代码我早就研究过了（网上基本css都是这样的），在搜狗高速模式下根本锁定不了。
    期待大侠的出现。你看仔细了！是2个DIV，套了2个table，头部跟body实际是分离的，锁不住，哈哈，你真搞笑。
      

  6.   


    唉，对你无语了，你这样的代码我早就研究过了（网上基本css都是这样的），在搜狗高速模式下根本锁定不了。
    期待大侠的出现。我也对于无语了，我怕你不知道关键的东西在哪，还在后面说了是依靠col来设置宽度的，你还是看都不看代码就当成跟网上那种一个一样了。无语
      

  7.   

    functionsub  你的那个限制太多了，必须是最后一列不分配宽度，如果改成中间某列不分配的话，上下线条就对不齐了。
    还是回到俺这个插件来吧针对俺这个代码改进一下。谁能给看看为啥对不齐啊？就拷贝了个表头副本就对不齐了？？我日
      

  8.   

    试试css里加入table{word-break:break-all;} 
      

  9.   

    解决了没有？  通过如下办法
            //表格对齐
            arowsdata.length=0;
            
            var h=document.getElementById("hcontent");  //表头行
             
            var hr=h.getElementsByTagName("tr");
             
            var hrows=hr[0].childNodes;
              
        var dt=content.getElementsByTagName("tr");  //数据行
            var dtirows=dt[0].childNodes;
             
              for(var ri=0;ri<dtirows.length;ri++)
          {
             //表头宽度与数据宽度对比，谁大取谁
               var tempvar=dtirows[ri].offsetWidth>hrows[ri].offsetWidth?dtirows[ri].offsetWidth:hrows[ri].offsetWidth;                              //修改表头与表数据宽度
           dtirows[ri].style.width=tempvar+"px";
           hrows[ri].style.width=tempvar+"px";
          }下面是页面无素结构             <!-- 表头 -->
                <div class="dh_table">
    <table  id="th_table"  class="th_table">
    <thead id="hcontent" class="hcontent"></thead>
    </table>
    </div>

    <!-- 数据 -->
    <div class="dd_table">
    <table class="td_table">
    <tbody id="dcontent" class="dcontent"></tbody>
        </table>
    </div>css就不写了，希望路过的有所启发