白日梦想jun
2016-04-25 05:34
采纳率: 58.7%
浏览 2.9k

table用rowspan合并行后,单双行颜色问题,谢谢指导。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/count.css">
</head>
<body>
<h1>our count</h1>
<p><img src="" alt=""></p>
<p>this is our count,i am very happy!</p>
    <table>
        <caption>The Count</caption>
        <tr>
            <th>City</th>
            <th>Date</th>
            <th>Temperature</th>
            <th>Altitude</th>
            <th>Population</th>
            <th>Diner Rating</th>
        </tr>
        <tr>
            <td>WA</td>
            <td>June 15th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>ID</td>
            <td>June 25th</td>
            <td>74</td>
            <td>204ft</td>
            <td>2968</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td>UT</td>
            <td>July 10th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>CO</td>
            <td>July 23rd</td>
            <td>75</td>
            <td>124ft</td>
            <td>2986</td>
            <td>4/9</td>
        </tr>
        <tr>
            <td rowspan="2">NM</td> <!--  表示这一列,两行合并 -->
            <td>August 9th</td>
            <td>75</td>
            <td rowspan="2">104ft</td>
            <td rowspan="2">29686</td>
            <td>1/5</td>
        </tr>
        <tr>

            <td>August 27th</td>
            <td>85</td>


            <td>
                <table>
                    <tr>
                        <th>Tess</th>
                        <td>5/5</td>
                    </tr>
                    <tr>
                        <th>Tony</th>
                        <td>4/5</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>AZ</td>
            <td>August 18th</td>
            <td>175</td>
            <td>120ft</td>
            <td>2966</td>
            <td>3/5</td>
        </tr>
    </table>
</body>
</html>

css代码:
*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 1024px;
}
p,h1{
    text-align: center;
}

table{
    width:80%;
    margin: 5% auto ;
    border: thin solid black;
    caption-side: bottom;
/*  border-spacing: 0px; */
    border-collapse: collapse;
}

td,th{
    border: 1px dotted gray;
    padding: 5px;
    margin: 0px;
}
caption{
    font-style: italic;
    padding-top: 8px;
}
th{
    background-color: #cc6600;
}
/* .cellcolor{
    background-color: #fcba7a;
} */

tr:nth-child(2n){
    background-color: beige;
}
tr:nth-child(2n+1){
    background-color: fcba7a;
}
table table th{
    background-color: white;
}

//这样合并的地方的一行出现的颜色不是想要的,怎么解决呢?有没有不用在单独给这些地方设置样式的方法呢?
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳

    手动控制,不要用子nth-child这种选择器,定义2个样式来切换

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    
    *{
        padding: 0px;
        margin: 0px;
    }
    body{
        width: 1024px;
    }
    p,h1{
        text-align: center;
    }
    
    table{
        width:80%;
        margin: 5% auto ;
        border: thin solid black;
        caption-side: bottom;
    /*  border-spacing: 0px; */
        border-collapse: collapse;
    }
    
    td,th{
        border: 1px dotted gray;
        padding: 5px;
        margin: 0px;
    }
    caption{
        font-style: italic;
        padding-top: 8px;
    }
    th{
        background-color: #cc6600;
    }
    /* .cellcolor{
        background-color: #fcba7a;
    } */
    
    tr.odd{
        background-color: beige;
    }
    tr.even{
        background-color:#fcba7a;
    }
    table table th{
        background-color: white;
    }
        </style>
    </head>
    <body>
        <h1>our count</h1>
        <p><img src="" alt=""></p>
        <p>this is our count,i am very happy!</p>
        <table>
            <caption>The Count</caption>
            <tr>
                <th>City</th>
                <th>Date</th>
                <th>Temperature</th>
                <th>Altitude</th>
                <th>Population</th>
                <th>Diner Rating</th>
            </tr>
            <tr class="odd">
                <td>WA</td>
                <td>June 15th</td>
                <td>75</td>
                <td>1204ft</td>
                <td>29686</td>
                <td>4/5</td>
            </tr>
            <tr class="even">
                <td>ID</td>
                <td>June 25th</td>
                <td>74</td>
                <td>204ft</td>
                <td>2968</td>
                <td>3/5</td>
            </tr>
            <tr class="odd">
                <td>UT</td>
                <td>July 10th</td>
                <td>75</td>
                <td>1204ft</td>
                <td>29686</td>
                <td>4/5</td>
            </tr>
            <tr class="even">
                <td>CO</td>
                <td>July 23rd</td>
                <td>75</td>
                <td>124ft</td>
                <td>2986</td>
                <td>4/9</td>
            </tr>
            <tr class="odd">
                <td rowspan="2">NM</td> <!--  表示这一列,两行合并 -->
                <td>August 9th</td>
                <td>75</td>
                <td rowspan="2">104ft</td>
                <td rowspan="2">29686</td>
                <td>1/5</td>
            </tr>
            <tr class="odd">
    
                <td>August 27th</td>
                <td>85</td>
    
    
                <td>
                    <table>
                        <tr>
                            <th>Tess</th>
                            <td>5/5</td>
                        </tr>
                        <tr>
                            <th>Tony</th>
                            <td>4/5</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="even">
                <td>AZ</td>
                <td>August 18th</td>
                <td>175</td>
                <td>120ft</td>
                <td>2966</td>
                <td>3/5</td>
            </tr>
        </table>
    </body>
    </html>
    
    点赞 评论

相关推荐 更多相似问题