css 表格

作者：佳凝皓月发布日期:2026-04-28 浏览:70

/* CSS 表格样式示例 */

table {
  width: 100%; /* 设置表格宽度为100% */
  border-collapse: collapse; /* 合并边框，使表格看起来更整洁 */
}

th, td {
  border: 1px solid black; /* 添加单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: left; /* 文本左对齐 */
}

th {
  background-color: #f2f2f2; /* 表头背景颜色 */
  font-weight: bold; /* 表头字体加粗 */
}

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

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

解释说明：

table：设置表格的宽度为100%，并且合并边框以使表格看起来更整洁。
th, td：为表头和单元格添加边框、内边距，并将文本左对齐。
th：为表头设置背景颜色和字体加粗。
tr:nth-child(even)：为偶数行设置不同的背景颜色，以便于阅读。
tr:hover：当鼠标悬停在某一行时，改变该行的背景颜色。

上一篇：css 文字竖排

下一篇：css表格