如何用css设置表格的偶数行样式为白色

可以使用jquery来实现 例如 $("table tr:odd").css("background","#fff");或者使用css3,例如table tr:2n{background:#fff;} http://book.51cto.com/art/201105/259770.htm 千声盒子 /*不要使用标签名作为类...
如何用css设置表格的偶数行样式为白色
可以使用jquery来实现 例如 $("table tr:odd").css("background","#fff");或者使用css3,例如table tr:2n{background:#fff;}2014-01-28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>千声盒子</title> <style type="text/css"> /*不要使用标签名作为类名*/ /*.table{text-align:center;width:100%;height:100%;border-width:thin;border-style:solid;border-color:#AA9FFF;border-collapse:separate;}*/ .tbClass { text-align:center; width:100%;height:100%; /*首先对大表格加上左边 和 底边*/ /*我自作主张加上了底边框,可以删掉去*/ /*听说FF下不支持缩写,请你自己把下面的写法拆分出来*/ border-left:2px #AA9FFF solid; /* 左边框 */ border-bottom:2px #AA9FFF solid; /*底边框*/ } .tbClass td {/*单元格的上边和右边*/ border-top:2px #AA9FFF solid; border-right:2px #AA9FFF solid; } .tbClass td {/*测试用,为了看到效果,你可以把这个删掉去*/ /*width:100px; height:80px;*/ } /*专门为“盒子那行写的类”*/ .boxCell td { height:101px; padding:0; margin:0} </style> </head> <body> <table id="Box" name="Box" class="tbClass" cellspacing=0><!--注意! 1:我把类名由table改成tbClass了, 2: cellspacing=0--> <?php for($i=1;$i<=1000;$i++){ if($i%5==0){ echo "<td>$i</td>"; echo "</tr> <tr class=\"boxCell\"> <td>盒子</td> <td>盒子</td> <td>盒子</td> <td>盒子</td> <td>盒子</td> </tr> ";/////注意! 这里使用了一个boxCell的CSS类,不会那么多冗余代码 echo "<tr>"; }else{ echo "<td>$i</td>"; } } ?> </table> </body> </html> //////最后说明; 1。如果乱码,或无显示,请注意你php文件的编码格式,或在浏览器下选择GBK32编码 2。这种专业问题,如果到Csdn 里发帖,十分钟之内就有人回答了 3。百度的BUG:回复后再修改,就不能保持代码的缩进了 -_-!即不能tab缩进,要换成4个空格给分给分呀。很好,2011/9/26 19:05:512011-09-26
mengvlog 阅读 6 次 更新于 2025-07-20 17:04:07 我来答关注问题0
  • 通过CSS伪类选择器,可以轻松实现选择页面中奇数行和偶数行。例如,使用`nth-child(odd)`可选中奇数行,`nth-child(even)`则用于选中偶数行。除了直接应用`nth-child`,还可以采用`nth-child(2n-1)`或`nth-child(2n+1)`来定位奇数行,而`nth-child(2n)`则适用于选择偶数行。深入理解`nth-child...

  • 可以使用jquery来实现 例如 $("table tr:odd").css("background","#fff");或者使用css3,例如table tr:2n{background:#fff;}

  •  网海1书生 CSS中如何选择ul下li的奇数,偶数行

    li:nth-of-type(odd) {...} /*--这是奇数行--*/li:nth-of-type(even) {...} /*--这是偶数行--*/

  •  翡希信息咨询 css选择器nth-child有哪几种用法?

    CSS选择器“nthchild”主要有以下几种用法:选择第一项:使用 :firstchild 可选取列表中的第一个元素。选择第N项:通过 :nthchild 可选取列表中的第n个元素,其中n是具体的数字,例如 :nthchild 选取第二项。选择最后一项:使用 :lastchild 可选取列表的最后一个元素。选择偶数行:使用 :nthchild ...

  •  大梁看世界 js 如何设置奇数行和偶数行的背景颜色?

    ("选择器 :even").css("background","#ff0");//偶数行 若是用原生js就要判断,例如 for(var i = 0; i < 元素行数; i++){ if(i%2 == 0){ //奇数行代码 }else{ //偶数行代码 } } 而且用css也可以添加奇偶数行的样式,例如元素为tr的奇偶设置 tr:nth-child(odd){background:...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部