表格的小细节

大坤...

已于 2022-07-15 17:26:35 修改

阅读量146

点赞数

文章标签： html

于 2022-07-15 17:25:06 首次发布

本文链接：https://blog.youkuaiyun.com/red_HTML/article/details/125809094

版权

这段代码展示了如何使用CSS为HTML表格实现隔行变色的效果，同时添加了鼠标悬停时单元格背景色变化的功能。通过`tbody tr:nth-child(odd)`和`tbody tr:nth-child(even)`选择器实现奇偶行不同颜色，使用`td:hover`实现单元格悬停高亮。此外，还设置了表格边框合并、单元格高度和文字居中等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				/* border: 1px solid gainsboro; */
				border-collapse: collapse;
				width: 800px;
				text-align: center;
			}
			tbody tr{
				border-bottom: 2px solid black;
			}
			tbody tr:nth-child(odd){
				background: powderblue;
			}
			tbody tr:nth-child(even){
				background: lemonchiffon;
			}
			th{
				background: orange;
				color: white;
				height: 30px;
				border: none;
			}
			td{
				height: 30px;
			}
			td:hover{
				background: orange;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>菜单1</th>
					<th>菜单1</th>
					<th>菜单1</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小明</td>
					<td>内容2</td>
					<td>内容3</td>
					<td>内容4</td>
				</tr>
				<tr>
					<td>大明</td>
					<td>内容2</td>
					<td>内容3</td>
					<td>内容5</td>
				</tr>
				<tr>
					<td>二名</td>
					<td>内容2</td>
					<td>内容3</td>
					<td>内容5</td>
				</tr>
				
			</tbody>
		</table>
	</body>
</html>