我想实现如下图效果：


这是我做的样式；问题是，我鼠标悬浮到td上会把整行都撑大，可是上面这个就没问题（上面是别人写的）
我想要的效果是：鼠标悬浮别把整行都撑大，就td列变大

回复讨论(解决方案)

看效果都一样，哪有不同说清楚些。

看效果都一样，哪有不同说清楚些。
上面那个只td列变大，而我的是整行，也就是TR都会变大

上面也变大了，先贴代码

上面也变大了，先贴代码
上面的别的不变，就选中的变大，我做的整行都大，

.table1 tbody tr .td1{border:1px #527298 solid;font-weight:bold;}  /*鼠标悬浮边框加粗字体加粗*/

overflow:hidden;

加上这个看看

设置固定宽度

想要不撑大，可以在TD里面加一个比如设置好的宽高，这样无论如何都不会变大，同时加上overflow:hidden

想要不撑大，可以在TD里面加一个比如设置好的宽高，这样无论如何都不会变大，同时加上overflow:hidden
不行

CSS code

overflow:hidden;


加上这个看看
不行啊

在td里放div，然后悬浮鼠标时给div边框。

别人做的你看代码了吗？
td上悬浮是用的div模仿的吗？

HTML>			<meta><title></title><link><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>

1-1	1-1	1-1	1-1	1-1
1-1	1-1	1-1	1-1	1-1
1-1	1-1	1-1	1-1	1-1

<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>

楼主 这个 意思？

别人做的你看代码了吗？
td上悬浮是用的div模仿的吗？
没看代码 - -！
不是不想看，是看不了，别人这个是用winfrom做的

不同的浏览器的默认值不一样，你可以用

的背景图片来解决。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！