表格的小细节

原创已于 2022-07-15 17:26:35 修改 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

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

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

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