菜鸟求助各位...
我想实现如下图效果：
这是我做的样式；问题是，我鼠标悬浮到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>