jQuery + css 单双行替换配色为什么显示的效果不出现呢？

本帖最后由 waskiz 于 2013-08-07 22:14:39 编辑

解决方案 »

  1.   

      其他效果都是有效的：
    （1）color是有效的，不过对比不明显，你可以把.odd的color设置成比较明显的一个颜色再看看。
    （2）padding也是有效的，不过tr的高度是由td决定的。（3）border也有效，但是没有显示出来的原因在于table没有合并单元格，即没有设置:
    { border-collapse:collapse },把这个样式加到#mytable{...}里就能显示出来了。
      

  2.   

    paading 要设置在td上面
    颜色你换一个深色就可以看到了<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("tr:odd").addClass("odd");
    $("tr:odd td").addClass("odd");
    $("tr:even").addClass("even"); 
    });
    </script>
    <title>CSS Tables</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head><style type="text/css">
    body {
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
    }#mytable {
    width: 700px;
    padding: 0;
    margin: 0;
    }caption {
    padding: 0 0 5px 0;
    width: 700px;  
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
    }/*标题*/th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    }.odd {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
    background: #fff;}
    .even {
    background: red;
    color: #797268;
    }</style>
    <body>
    <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
    <caption></caption>
    <tr>
    <th scope="col" abbr="Configurations">Configurations</th>
    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
    <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
    </tr><tr> 
    <td>lipeng</td>
    <td>M9454LL/A</td>
    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
    </tr>
    <tr>
    <td>mapabc</td>
    <td>Dual 1.8GHz PowerPC G5</td>
    <td>Dual 2GHz PowerPC G5</td>
    <td>Dual 2.5GHz PowerPC G5</td>
    </tr>
    <tr>
    <td>what?</td>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>
    </tr>
    <tr>
    <td>ikonw</td>
    <td>512K per processor</td>
    <td>512K per processor</td>
    <td>512K per processor</td>
    </tr>
    </table>
    </body>
    </html>
      

  3.   

    别忘了把头部的jquery改成你的 - -