table css

作者：风外听竹发布日期:2026-05-21 浏览:33

/* 示例代码：使用 CSS 样式化表格 */

table {
  width: 100%; /* 表格宽度为父元素的100% */
  border-collapse: collapse; /* 合并单元格边框 */
}

th, td {
  border: 1px solid #ddd; /* 单元格边框样式 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文本左对齐 */
}

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

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

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

这段代码展示了如何使用 CSS 样式化 HTML 表格。它包括了设置表格宽度、合并边框、定义单元格边框和内边距、设置表头样式、交替行背景颜色以及鼠标悬停效果。

上一篇：csstransform属性

下一篇：css兄弟选择器