Newbies, please help._html/css_WEB-ITnose-HTML Tutorial-php.cn

Newbies, please help._html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:08:36

Original

1017 people have browsed it

I want to achieve the following effect:

This is the style I made; the problem is that when I hover the mouse over td, the entire row will be enlarged, but the above is no problem ( The above is written by someone else)
The effect I want is: don’t expand the entire row when hovering the mouse, just make the td column larger

Reply to the discussion (solution)

It seems that the effect is the same, please explain clearly if there is any difference.

It seems the effect is the same, please explain clearly what is the difference.
In the above one, only the td column becomes larger, but mine is the whole row, that is, the TR will become larger.

The above one also becomes larger, please post the code first.

The above one also becomes larger. , paste the code first
Keep the other things above unchanged, just make the selected one larger. The whole row I made is larger,

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

Copy after login

overflow:hidden;

Copy after login

Add this to see See

Set a fixed width

If you want to keep it from being too big, you can add one in TD such as and set the width and height of so that no matter It won’t get bigger no matter what, and at the same time add overflow:hidden

If you want to keep it from getting bigger, you can add something like in TD to set the width and height of , so that it will not become larger in any case, and add overflow:hidden
Nope

CSS code

overflow:hidden;

Add this Take a look
It doesn’t work

Put a div in the td, and then give the div a border when you hover the mouse.

Have you read the code that others have done?
Is the suspension on td imitated by div?

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

Copy after login

What does the original poster mean?

Have you read the code that others have done?
Is the suspension on td imitated by div?
Didn’t read the code - -!
It’s not that I don’t want to see it, it’s just that I can’t see it. Others used winfrom to make this.

Different browsers have different default values. You can use the background image of to solve the problem.