HTML 表格样式

使用 CSS 使您的表格看起来更好。

HTML 表格 - 斑马条纹

如果您在每隔一个表格行添加背景颜色，您将获得漂亮的斑马条纹效果。

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

要设置所有其他表格行元素的样式，请使用:nth-child(even)像这样的选择器：

示例

tr:nth-child(even) {
background-color: #D6EEEE;
}

亲自试一试 »

笔记：如果你使用(odd)代替 (even)，样式将出现在第 1、3、5 行等，而不是第 2、4、6 行等。

HTML 表格 - 垂直斑马条纹

要制作垂直斑马条纹，请每隔一条设计样式柱子，而不是其他的排。

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

设置:nth-child(even)对于这样的表数据元素：

示例

td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

亲自试一试 »

笔记：放在:nth-child()两者上的选择器th和td元素，如果您想在标题和常规表格单元格上都有样式。

组合垂直和水平斑马条纹

您可以结合上面两个示例中的样式，每隔一行和每一列都会有条纹。

如果使用透明颜色，您将获得重叠效果。

使用rgba()color 指定颜色的透明度：

示例

tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

亲自试一试 »

水平分隔线

名	姓	储蓄
彼得	格里芬	$100
路易斯	格里芬	$150
乔	斯旺森	$300

如果您仅在每个表格行的底部指定边框，您将拥有一个带有水平分隔线的表格。

添加border-bottom所有人的属性tr获得水平分隔线的元素：

示例

tr {
border-bottom: 1px solid #ddd;
}

亲自试一试 »

悬浮表格

使用:hover选择器打开tr鼠标悬停时突出显示表格行：

名	姓	储蓄
彼得	格里芬	$100
路易斯	格里芬	$150
乔	斯旺森	$300

示例

tr:hover {background-color: #D6EEEE;}

亲自试一试 »