css table样式

/* CSS table样式示例 */

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

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

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

/* 设置表格单元格的内边距 */
td {
  padding: 8px; /* 单元格内边距 */
}

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

解释说明：

• border-collapse: collapse;：使表格边框合并，避免出现双线效果。
• border: 1px solid black;：为表格、表头和单元格添加1像素的黑色边框。
• background-color: #f2f2f2;：设置表头的背景颜色为浅灰色。
• padding: 8px;：为表头和单元格设置内边距，使内容与边框之间有一定的间距。
• tr:hover { background-color: #ddd; }：当鼠标悬停在表格行上时，改变该行的背景颜色，提升用户体验。