<!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;
}
//这样合并的地方的一行出现的颜色不是想要的,怎么解决呢?有没有不用在单独给这些地方设置样式的方法呢?
table用rowspan合并行后,单双行颜色问题,谢谢指导。
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
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指向的问题