css 表格样式

/* CSS 表格样式示例 */

/* 基本表格样式 */
table {
  width: 100%; /* 表格宽度为父元素的100% */
  border-collapse: collapse; /* 边框合并，避免双线效果 */
}

/* 设置表格边框 */
table, th, td {
  border: 1px solid black; /* 给表格、表头和单元格添加黑色边框 */
}

/* 表头样式 */
th {
  background-color: #f2f2f2; /* 表头背景颜色 */
  text-align: left; /* 文本左对齐 */
  padding: 8px; /* 内边距 */
}

/* 单元格样式 */
td {
  padding: 8px; /* 内边距 */
  text-align: left; /* 文本左对齐 */
}

/* 鼠标悬停时行变色 */
tr:hover {
  background-color: #ddd; /* 悬停时行的背景颜色 */
}

/* 奇数行背景颜色 */
tr:nth-child(odd) {
  background-color: #f9f9f9; /* 奇数行的背景颜色 */
}

/* 偶数行背景颜色 */
tr:nth-child(even) {
  background-color: #fff; /* 偶数行的背景颜色 */
}

解释说明：

1. table: 设置表格的宽度为父元素的100%，并使用 border-collapse: collapse 来合并边框，避免双线效果。
2. table, th, td: 给表格、表头和单元格添加黑色边框。
3. th: 设置表头的背景颜色、文本对齐方式和内边距。
4. td: 设置单元格的内边距和文本对齐方式。
5. tr:hover: 当鼠标悬停在某一行时，改变该行的背景颜色。
6. tr:nth-child(odd) 和 tr:nth-child(even): 分别设置奇数行和偶数行的背景颜色，以实现斑马纹效果。