日期:2014-05-17  浏览次数:20607 次

菜鸟求助各位...
我想实现如下图效果:


这是我做的样式;问题是,我鼠标悬浮到td上会把整行都撑大,可是上面这个就没问题(上面是别人写的)
我想要的效果是:鼠标悬浮别把整行都撑大,就td列变大



------解决方案--------------------
在td里放div,然后悬浮鼠标时给div边框。
------解决方案--------------------
HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/reset.css" />
        <style>
            .table {
                margin:100px;
                background:#f2f2f2;
                color:#4873ff;
                text-align:center;
                
                border-collapse:separate;
            }
            .table td {
                display:inline-block;
                position:relative;
                width:60px; height:22px; line-height:22px;
            }
            .tr-hover {
                background:#d4e3ff;
            }
            td div {
                position:absolute; left:-2px; top:-2px;
                width:66px; height:26px;
                background:#f2f2f2;
                border:1px solid #7a7a7a;
                font-weight:bold;
            }
        </style>    
    </head>
    <body>
        <table class="table">
            <tr>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
            </tr>
            <tr>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
            </tr>
            <tr>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
            </tr>
        </table>
        <script>
            function $(el){
                return typeof el == 'string' ? document.getElementById(el) : el;
            }
            function $t(name, cot){
                cot = cot || document;
                return cot.getElementsByTagName(name);
            }
            var tr = $t('tr');
            for(var i = 0, len = tr.length; i < len; i++){
                tr[i].onmouseover = function(){
                    this.className = 'tr-hover';
                }
                tr[i].onmouseout = function(){
                    this.className = '';
                }                
            }
            
            var td = $t('td');
            for(var i = 0, len = td.length; i < len; i++){
                td[i].onmouseover = function(){
                    if( !$t('div', this).length ){
                        var div = document.createElement('div');
                        div.innerHTML = this.innerHTML;
                        this.appendChild(div);                    
                    }else{
                        $t('div', this)[0].style.display = 'block';
                    }
                    this.style.zIndex = 999;
                }
                td[i].onmouseout = function(){
                    $t('div', this)[0].style.display = 'none';
                    this.style.zIndex = 0;
                }                
            }
        </script>
    </body>
</html>