问题描述
- 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; } //这样合并的地方的一行出现的颜色不是想要的，怎么解决呢？有没有不用在单独给这些地方设置样式的方法呢？
解决方案
手动控制，不要用子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>
时间： 2025-01-30 06:00:07