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 |
| Joe | Swanson | $300 |
如果您仅在每行表格的底部指定边框，您将拥有一个带有水平分隔线的表格。
将 border-bottom 属性添加到所有 tr 元素以获得水平分隔线
可悬停表格
在 tr 上使用 :hover 选择器以突出显示鼠标悬停时的表格行
| 姓 | 名 | 储蓄 |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
