css3表格隔行变色和表格选中变颜色代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >Beautiful design tables in HTML in the style of a zebra.</ title > < link rel="stylesheet" href="css/style.css" type="text/css"> </ head > < body > < div id="container"> < table class="zebra"> < caption >表格隔行变色和滑过变色特效</ caption > < thead > < tr > < th >Date</ th > < th >Start time</ th > < th >End time</ th > < th >Name</ th > </ tr > </ thead > < tbody > < tr > < td >02.06.2010</ td > < td >10:00</ td > < td >12:00</ td > < td >Cleaning</ td > </ tr > < tr > < td >02.06.2010</ td > < td >12:00</ td > < td >15:00</ td > < td >Training</ td > </ tr > < tr > < td >02.06.2010</ td > < td >15:00</ td > < td >17:00</ td > < td >Rest</ td > </ tr > < tr > < td >02.06.2010</ td > < td >17:00</ td > < td >21:00</ td > < td >Work</ td > </ tr > < tr > < td >02.06.2010</ td > < td >21:00</ td > < td >07:00</ td > < td >Sleep</ td > </ tr > </ tbody > </ table > </ div > </ body > </ html > |
@charset "UTF-8"; html, body{ padding:0; margin:0; position:relative; background:url(../img/body.jpg); background-repeat:repeat; color:#fff; letter-spacing:1px; font-family:Georgia, "Times New Roman", Times, serif; } .zebra caption{ font-size:20px; font-weight:normal; background:url(../img/zebratable.png); background-repeat:no-repeat; background-position: 130px center; padding-top: 20px; height:50px;} #container{ padding-top:20px; width:960px; margin:0 auto; } table { border-collapse: collapse; border-spacing: 0; width:100%; -webkit-box-shadow: 0px 2px 1px 5px rgba(242, 242, 242, 0.1); box-shadow: 0px 2px 1px 5px rgba(242, 242, 242, 0.1); } .zebra { border: 1px solid #555; } .zebra td { border-left: 1px solid #555; border-top: 1px solid #555; padding: 10px; text-align: left; } .zebra th, .zebra th:hover { border-left: 1px solid #555; border-bottom: 1px solid #828282; padding: 20px; background-color:#151515 !important; background-image: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#404040)) !important; background-image: -webkit-linear-gradient(top, #151515, #404040) !important; background-image: -moz-linear-gradient(top, #151515, #404040) !important; background-image: -ms-linear-gradient(top, #151515, #404040) !important; background-image: -o-linear-gradient(top, #151515, #404040) !important; background-image: linear-gradient(top, #151515, #404040) !important; color:#fff !important; font-weight:normal; } .zebra tbody tr:nth-child(even) { background: #000 !important; color:#fff; } .zebra tr:hover *{ background: #eeeeee; color:#000; } .zebra tr { background:#404040; color:#fff; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!