当前位置：首页 → 问答吧 → 这样的DIV式表格如何隔行换色？

这样的DIV式表格如何隔行换色？

时间：2011-09-13

来源：互联网

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> div,ul,li{padding:0; margin:0;} ul,li{ list-style:none; } .mytable { width:100%; border:1px solid #ddd; float:left; } .mytable ul li { height:30px; line-height:30px; float:left; } .mytable ul li dt { width:200px; float:left; text-align:right; background:#f9f9f9; } .mytable ul li span { float:left; padding-left:10px; }/ </style> </head> <body> <div class='mytable'> <ul> <li style='width:50%;'><dt>你的姓名1：</dt>M_Name</li> <li style='width:50%;'><dt>你的姓名2：</dt>M_Name1</li> <li style='width:100%;'><dt>DDD个人简介：</dt>M_jianjie1</li> <li style='width:50%;'><dt>服务内容：</dt>M_neir1</li> <li style='width:50%;'><dt>email：</dt>M_email</li> <li style='width:50%;'><dt>出生日期：</dt>M_date</li> <li style='width:100%;'><dt>images：</dt>M_images</li> <li style='width:100%;'><dt>files：</dt>M_files</li> <li style='width:50%;'><dt>DDD详细内容：</dt>M_content1</li> <li style='width:50%;'><dt>地址：</dt>M_add</li> <li style='width:50%;'><dt>好不好：</dt>M_select</li> <li style='width:50%;'><dt>你爱吃的水果：</dt>M_print</li> <li style='width:50%;'><dt>你喜欢的电器：</dt>M_mechine</li> <li style='width:50%;'><dt>期望薪资：</dt>M_xinzi</li> <li style='width:100%;'><dt>提示问题：</dt>M_question</li> </ul> </div> </html> </body>
提示：您可以先修改部分代码再运行

[ 本帖最后由 teng315 于 2011-9-13 18:56 编辑 ]

作者: teng315 发布时间: 2011-09-13

给奇数行一个不同背景色的class

作者: lslglb 发布时间: 2011-09-13