白日梦想jun 2016-04-24 21:34 采纳率: 100%
浏览 3077
已采纳

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条回答 默认 最新

  • 斯洛文尼亚旅游 2016-04-24 22: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>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 有人帮看看这个问题的嘛
  • ¥15 STM32悬赏求解答,ai不要来解答
  • ¥15 Mysql 一张表同时多人查询和插入怎么防止死锁
  • ¥20 centos6.7 安装libevent库.总是报错,如何解决?
  • ¥15 电脑买回,学校的有线网络总掉。
  • ¥20 关于普洛菲斯触摸屏与AB连接地址问题
  • ¥15 syri可视化不显示插入缺失
  • ¥30 运行软件卡死查看系统日志分析不出来
  • ¥15 C语言代码改正特征选择算法设计,贝叶斯决策,,设计分类器,远程操作代码修正一下
  • ¥15 String 类valuve指向的问题
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部