CSS中的隔行换色

转载 2007年09月11日 18:20:00
一.表格的<tr>隔行换色
 <style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex==0)?"":
(this.sectionRowIndex%2==0)?"red":"blue")}
-->
</style>
</HEAD>
<table>
<tr>
<td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第3行</td><td>第3行</td>
</tr>
<tr>
<td>第4行</td><td>第4行</td>
</tr>
<tr>
<td>第5行</td><td>第5行</td>
</tr>
</table>
二.表格的td换色
 <style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
</HEAD>
<table>
< tr><td>第1行</td><td>第1行</td><td>第1行< /td><td>第1行</td><td>第1行</td></tr>
< tr><td>第2行</td><td>第2行</td><td>第2行< /td><td>第2行</td><td>第2行</td></tr>
< tr><td>第3行</td><td>第3行</td><td>第3行< /td><td>第3行</td><td>第3行</td></tr>
< tr><td>第4行</td><td>第4行</td><td>第4行< /td><td>第4行</td><td>第4行</td></tr>
< tr><td>第5行</td><td>第5行</td><td>第5行< /td><td>第5行</td><td>第5行</td></tr>
</table>
三.Li标签隔行换色代码
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.t1 {background-color:#336699;text-align:center}
.t2 {background-color:#ffcc00;text-align:center}
ul{list-style:none;width:200px;}
ul li{height:20px;line-height:20px;width:200px;}
</style>
<script>
<!-- POPOEVER is drinking half bottle of lemon tea:) --
function ulLi() {
for (i=1;i<bkg1.children.length+1;i++) {
(i%2>0)?(bkg1.children(i-1).className = "t1"):(bkg1.children(i-1).className = "t2");
}
}
//-- Lemon tea is bottom up -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="ulLi();">
<ul id="bkg1">
<li>li背景变变变</li>
<li>li背景变变变</li>
<li>li背景变变变</li>
<li>li背景变变变</li>
<li>li背景变变变</li>
<li>li背景变变变</li>
<li>li背景变变变</li>
<li>li背景变变变</li>
</ul>
</body>
</html>

出自: http://www.blogjava.net/liuwentao253/archive/2007/08/07/134903.html

CSS 通过nth实现隔行换色

先上效果图: 实现代码: .mytable{ width:100%; border-collapse:collapse; } .mytable td{ border:1...
  • zhangfeng2124
  • zhangfeng2124
  • 2017年03月27日 10:46
  • 170

CSS之Table表格隔行换色之简洁版

CSS之Table表格隔行换色之简洁版
  • netuser1937
  • netuser1937
  • 2017年02月07日 16:15
  • 359

css隔行换色和鼠标划过变色

css table隔行换色和鼠标划过变色
  • paincupid
  • paincupid
  • 2016年01月03日 21:42
  • 1457

js实现隔行换色

http://www.w3.org/TR/html4/strict.dtd">     js实现隔行换色---阿会楠练习作品(为我所写,非我所想)     window.onload = functi...
  • taokai
  • taokai
  • 2008年01月22日 15:59
  • 360

CSS样式定义table隔行背景颜色显示不一样(IE8及以上,其他浏览器不支持)

IE的官方blog中看到了这篇文章--《Ending Expressions》。文章指出在IE8的标准模式下,将不再对CSS expression进行支持 定义   IE5及其以后版本支持在CSS中使...
  • dongzhiquan
  • dongzhiquan
  • 2009年12月08日 23:04
  • 2881

JSP页面隔行换色

bgcolor="red">
  • qq_28342873
  • qq_28342873
  • 2016年04月11日 09:32
  • 201

用PHP和JS分别实现隔行换色

1.PHP实现隔行换色
  • qq_30292863
  • qq_30292863
  • 2015年12月01日 16:20
  • 994

html中用js实现的表格隔行换色

写的时候把自己的表//写的时候把自己的表的table加上id="tbl" 代码如下: 表格隔行换色 window...
  • qq_37796017
  • qq_37796017
  • 2017年09月16日 14:12
  • 386

angular隔行换色效果

angular var m1=angular.module('myApp1
  • qq_32584661
  • qq_32584661
  • 2016年11月15日 09:18
  • 376

smarty中使用实现隔行变色

idnamenickName {foreach from = $hero item=singhero}    {$singhero.id}    {$singhero.name}   ...
  • zunguitiancheng
  • zunguitiancheng
  • 2014年05月17日 21:57
  • 344
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中的隔行换色
举报原因:
原因补充:

(最多只允许输入30个字)