css设置datatable表格奇偶数行或者奇偶数列背景色不同

原创于 2018-07-19 10:17:04 发布 · 8.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#datatable背景色 #table奇偶背景不同

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

本文介绍了一种使用CSS选择器 nth-child 来为表格的奇数和偶数行及列设置不同背景颜色的方法，以此增强表格的可读性和美观性。

奇偶数行背景色不同：

/*设置表格奇偶数行背景色不同*/
.table-responsive table tbody tr:nth-child(even){
    background: rgba(250,250,255,1)
}
.table-responsive table tbody tr:nth-child(odd){
    background:rgba(255,255,255,1);
}

奇偶数列背景色不同：

/*设置表格奇偶数列背景色不同*/
.table-responsive table tbody th:nth-child(even){
    background: rgba(250,250,255,1)
}
.table-responsive table tbody th:nth-child(odd){
    background:rgba(255,255,255,1);
}