前端html利用CSS实现table表格斑马纹隔行换色效果

在网页中，表格是一种常用的数据展示方式，如下面的实例就是一个收支数据的表格。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>table2n</title>
</head><body><style>table {margin: 30px auto;border: #aaa 4px double;border-collapse: separate;border-spacing: 0px }td,th {padding: 5px;text-align: center;border-color: #ddd;border-width: 1px;border-style: solid}</style><table><tr><th>月份</th><th>理财</th><th>工资</th> <th>稿费</th><th>总收入</th><th>生活</th><th>购物</th><th>话费</th><th>交通</th><th>总支出</th></tr><tr><td>一月</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr><tr><td>二月</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr><tr><td>三月</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr><tr><td>四月</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr><tr><td>五月</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr><tr><td>六月</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr><tr><td>七月</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr><tr><td>八月</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr></table>
</body>
</html>

正常情况下即使设置了边框样式和颜色，对于数据的阅读还是不友好的，尤其是行数特别多的时候，很容易看错。
最常用的方法就是对表格数据进行深浅不同的填色，实现隔行变化的显示，这种效果也称作“斑马纹”。
利用CSS的子过滤器:nth-child（CSS 选择器）配合odd或even实现奇偶行的背景色变化。

tr:nth-child(even) {background: #f1f1f1;}

当然css的强大之处还在于，可以对表格实现任意行隔行变色

tr:nth-child(3n-1) {background: rgb(255, 0, 255);}tr:nth-child(3n) {background: rgb(255, 255, 0);}tr:nth-child(3n+1) {background: rgb(0, 255, 255);}

也可以对标题行单独设置

tr:nth-child(1) {background: rgb(255, 255, 255);}

前端html利用CSS实现table表格斑马纹隔行换色效果相关推荐

前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...
Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
微信小程序表格实现隔行换色
微信小程序的表格样式实现隔行换色: 用三元表达式改变标签class名, 在wxss分别写不同的类名: flex-view-itemodd flex-view-itemeven <view cla ...
WEB前端知识大整合之Jquery表单隔行换色
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
隔行换色并且鼠标指向行变色的表格
一应用对于一些清单型数据,通常是利用表格展示到页面中.如果数据比较多,很容易看串行.这时,可以为表格添加隔行换色并且鼠标指向行变色功能. 二代码 <script language=&quo ...
html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...
使用css选择器实现表格隔行换色
使用css选择器实现表格隔行换色 <style>*{margin: 0;padding: 0;}body{padding: 200px;box-sizing: border-box;}ta ...

前端html利用CSS实现table表格斑马纹隔行换色效果

前端html利用CSS实现table表格斑马纹隔行换色效果相关推荐

最新文章

热门文章