1、首先打开Vscode编辑器,新建一个HTML文档,用于承载表格和CSS。
2、然后新建一个5行3列的<table>表格备用。
3、接着定义一个内联样式,设置table表格的偶数行even背景色为浅灰色,奇数行odd的背景色为蓝色。
4、保存以上内容,在浏览器预览效果,就能看到奇数行景色为蓝色,偶数行背景色为浅灰色的效果了。
可以啊,用css3或者jq实现。
可以使用css3的奇偶选择器,如:
tr:nth-child(odd){background-color:#FFE4C4}tr:nth-child(even){background-color:#F0F0F0}
li:nth-child(odd)是设置奇数行的背景色,li:nth-child(even)是设置偶数行的。但是css3不兼容IE9以下的浏览器,如果需要考虑到兼容问题的话,可以使用jq设置,如:
$("table tr:nth-child(even)").css("background-color","#FFE4C4") //设置偶数行的背景色$("table tr:nth-child(odd)").css("background-color","#F0F0F0") //设置奇数行的背景色
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
要是兼容的话,可以分别定义偶数行样式和奇数行样式;