前端-table表格隔行变色
table表格隔行变色
作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了。今天就纪录一下,自己在后台经常用到的一个小玩意。
:nth-child(): 定义和用法
:nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字,一个关键字,或者一个公式
使用:nth-child()可以表格数据看起来更加的直观,说到这我就得说说当时的情况:后台表格的数据展现得非常多而且又密集,当我想查一下这第数据是什么类型时,得盯紧它,深怕看到下一行了。
当时是这样的:
当时我就想着,来个前端多好啊,直接就可以交给他了。哈哈~
没办法,我就算想破脑袋他也不来啊,只能自己上手咯。
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table, tr, td, th
{padding: 0;margin: 0;
}
table
{width: 100%;border-color: #ccc;
}
table tr
{line-height: 30px;border-color: #ccc;
}
table th, table td{text-align: center;border-color: #ccc;
}
</style>
</head><body>
<table border="1" cellspacing="0"><thead><tr><th>某仓库货架</th><th>某仓库货架</th><th>某仓库货架</th></tr></thead><tbody><tr><td>太阳能</td><td>空气能</td><td>电能</td></tr><tr><td>床头闹钟</td><td>床头闹钟</td><td>床头闹钟</td></tr><tr><td>太阳能</td><td>空气能</td><td>电能</td></tr><tr><td>床头闹钟</td><td>床头闹钟</td><td>床头闹钟</td></tr></tbody>
</table>
</body>
</html>
主要核心样式是:二者择其一
/*设置奇数行颜色*/
table tr:nth-child(odd)
{background: #ccc;
}
/*设置偶数行颜色*/
table tr:nth-child(even)
{background: #ccc;
}
效果图:
前端-table表格隔行变色相关推荐
- 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- onmouseover+onmouseout :表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 实现表格隔行变色的方法
css实现表格隔行变色: <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...
- jquery表格隔行变色
结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- Python_day21--练习--点亮灯泡、表格隔行变色
一.点亮灯泡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
最新文章
- 微服务前端开发框架React-Admin
- 解决GitHub加载不出图片问题
- iOS 10 的一个重要更新-开发 iMessage 的第三方插件
- JS替换地址栏参数值
- PHP base64
- 简介DOTNET 编译原理 简介DOTNET 编译原理 简介DOTNET 编译原理
- .NET编程-----------------------Web.config配置文件详解
- 文件下载及web文件的contentType类型大全
- 一个三十岁男人的婚姻思考
- 最新升学e网通JS逆向分析
- nodejs-基础:路由基础
- IEEE802.15.4、ZigBee、ZigBee协议栈、Zstack、ZigBee联盟、CC2530、IAR的关系?
- 论文模型构建的步骤_Deep Learning of Graph Matching论文解读
- flutter菜鸟教程!java流程图平行四边形
- 【STM32F429开发板用户手册】第33章 STM32F429的SPI总线应用之驱动DAC8563(双通道,16bit分辨率,正负10V)
- 深信服安全运营工程师一面经验+二面经验
- EasyRecovery2022数据恢复软件稳定版及版本区别对比
- 20条非常实用的Python代码实例
- C#,入门教程(03)——Visual Studio 2022编写彩色Hello World与动画效果
- 三家企业“支招”,数据安全防护指南来了!