table { border-collapse: collapse; /*合并边框*/ width: 100%; /*表格宽度为 100%*/ } tr:nth-child(even) { background-color: #f2f2f2; /*为偶数行添加背景色*/ } tr:nth-child(odd) { background-color: #ffffff; /*为奇数行添加背景色*/ }
以上代码首先是为了使表格边框合并在一起,然后设置表格宽度为 100%。接下来是关键代码,使用 CSS 的 nth-child 伪类选择器,为偶数行和奇数行添加不同的背景色。nth-child(n) 表示选择 nth 个子元素,其中 n 可被替换成数字、odd(奇数)或 even(偶数)。
在以上代码中,偶数行设置为浅灰色,奇数行设置为白色,再次强调,这只是一种示例,可以根据需要进行调整。此外,也可以使用其他颜色或纹理来为表格添加间隔色。因此,当需要添加表格间隔色时,只需将以上代码应用到相应的表格上即可。