http://xiangai.taobao.com
http://shop148612228.taobao.com

超强 css 实现 table 隔行 ,隔列 换色

 

隔行换色示例: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放弃class与js实现隔行换色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />

<style type="text/css">
<!--
/* PR-CSS */
table
{border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td
{border:solid #999;border-width:0 1px 1px 0;}

tr
{background:#eee;}
tr + tr
{background:#ccc;}
tr + tr + tr
{background:#eee;}
tr + tr + tr + tr
{background:#ccc;}
tr + tr + tr + tr + tr
{background:#eee;}
-->
</style>
</head>

<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>




隔列换色示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放弃class与js实现隔列换色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />

<style type="text/css">
<!--
/* PR-CSS */
table
{border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td
{border:solid #999;border-width:0 1px 1px 0;}

td
{background:#eee;}
td + td
{background:#ccc;}
td + td + td
{background:#eee;}
td + td + td + td
{background:#ccc;}
td + td + td + td + td
{background:#eee;}
-->
</style>
</head>

<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>

详细出处参考:http://www.jb51.net/article/10160.htm

 

posted @ 2012-01-18 10:45  万事俱备就差个程序员  阅读(1005)  评论(0编辑  收藏  举报

http://xiangai.taobao.com
http://shop148612228.taobao.com
如果您觉得对您有帮助.领个红包吧.谢谢.
支付宝红包
微信打赏 支付宝打赏