2017-04-21 table隔行变色

Published on:

两行css代码搞定table隔行变色


图片中的table隔行变色是我使用css做的一个小实验,颜色搭配还不是很好。

实验页面:app/views/jobs/index.html.erb

通过以下两行css代码


tbody tr{background: #C5E1A5;} // 设置tbody标签下所有的tr背景颜色为草绿色
tbody tr:nth-child(even){background: #BCAAA4;} // 覆盖tbody标签下所有偶数行的tr背景颜色为淡咖啡色

:nth-child()选择器说明

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
Odd 和 even 两个参数可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
所以上面的代码还可以这样写

tbody tr:nth-child(odd) {background: #xxx;} //设置tbody标签下所有奇数行的背景颜色
tbody tr:nth-child(even){background: #xxx;} //设置tbody标签下所有偶数行的背景颜色


附上W3School关于:nth-child()选择器的说明链接:
http://www.w3school.com.cn/cssref/selector_nth-child.asp

补充:table标题栏的颜色可以通过直接变更thead标签来实现


thead {
color: #795548;
background-color: #A7FFEB;
}