让table中的td没有边界

最新推荐文章于 2022-07-01 11:38:08 发布

_Slience_

最新推荐文章于 2022-07-01 11:38:08 发布

阅读量1.8w

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

本想做一个鼠标移动到某一行，那一行的背景色就变，以突出显示，我最初的代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table{
				width: 50%;
				margin: 0 auto;
				height: 200px;
				text-align: center;
			}
			tr:hover {
				background: lightgrey;
			}
		</style>	
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
	</body>
</html>

效果如下

讨厌的白边界，想用margin和padding设为0来去掉，发现去不掉。正确的方法是在table标签下添加cellspacing="0"属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table{
				width: 50%;
				margin: 0 auto;
				height: 200px;
				text-align: center;
			}
			tr:hover {
				background: lightgrey;
			}
		</style>	
	</head>
	<body>
		<table cellspacing="0">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
	</body>
</html>

效果如图