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) 选择器，如下所示：
注意： 如果使用 (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)：
注意： 如果要同时为表头和常规表格单元格设置样式，请将 :nth-child() 选择器同时应用于 th 和 td 元素。
组合垂直和水平斑马条纹
您可以组合以上两个示例的样式，这样每隔一行和每隔一列都会有条纹。
如果使用透明颜色，您将获得重叠效果。
使用 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);
}
自己动手试一试 »
水平分隔线
| 名字 | 姓氏 | 储蓄 |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| 乔 | Swanson | $300 |
如果仅在每行表格行的底部指定边框，您将得到一个带有水平分隔线的表格。
为所有 tr 元素添加 border-bottom 属性以获得水平分隔线
鼠标悬停表格
使用 tr 上的 :hover 选择器在鼠标悬停时突出显示表格行
| 名字 | 姓氏 | 储蓄 |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| 乔 | Swanson | $300 |
