2 oiu1010110 oiu1010110 于 2016.04.25 13:34 提问

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个回答

showbo
showbo   Ds   Rxr 2016.04.25 14:08
已采纳

手动控制,不要用子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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!