HTML 表格样式

HTML 表格 - 斑马条纹

如果您为交替的表格行添加背景颜色，将会获得漂亮的斑马条纹效果。

要为交替的表格行元素设置样式，请使用 :nth-child(even) 选择器，如下所示：

实例

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

亲自试一试

注意：如果您使用 (odd) 代替 (even)，样式将应用于第 1、3、5 等行，而不是第 2、4、6 等行。

HTML 表格 - 垂直斑马条纹

要制作垂直斑马条纹，请为交替的列设置样式，而不是交替的行。

像这样为表格数据元素设置 :nth-child(even)：

实例

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

亲自试一试

注意：如果您希望样式同时应用于表头和常规表格单元格，请在 th 和 td 元素上都放置 :nth-child() 选择器。

组合垂直和水平斑马条纹

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

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

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

实例

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);
}

亲自试一试

水平分隔线

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

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

实例

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

亲自试一试

可悬停表格

在 tr 上使用 :hover 选择器，以便在鼠标悬停时高亮显示表格行：

实例

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

亲自试一试