如何使用CSS创建横向条纹样式的HTML表格？

要给表格添加横向条纹（行交替变色）效果，核心是利用CSS的:nth-child()伪类选择器，针对表格的<tr>元素设置交替背景色。以下是具体的样式代码：

/* 表格基础样式，优化视觉表现 */
table {
  border-collapse: collapse; /* 合并单元格边框，避免双边框 */
  width: 100%; /* 可选，让表格占满容器宽度 */
}

td {
  border: 1px solid #ddd; /* 给单元格添加浅灰色边框 */
  padding: 8px; /* 增加内边距，提升文本可读性 */
  text-align: left; /* 文本左对齐 */
}

/* 核心：实现横向条纹效果 */
tr:nth-child(even) {
  background-color: #f2f2f2; /* 给偶数行设置浅灰色背景，可自定义颜色 */
}

/* 可选：鼠标悬停行时的高亮效果 */
tr:hover {
  background-color: #ddd;
}

代码说明 #

• border-collapse: collapse：让表格边框合并为单线条，视觉更整洁。
• tr:nth-child(even)：选中表格内的偶数行（第2、4、6...行）设置背景色；若要给奇数行添加条纹，将even替换为odd即可。
• 背景色可根据页面风格自定义，比如换成淡蓝色#e6f7ff、淡绿色#f0f9e8等。

将上述CSS与你提供的HTML代码结合，就能得到清晰的横向条纹表格效果。

内容的提问来源于stack exchange，提问作者Learning