好的,我将完整的代码粘贴给你 <div class="table" style="overflow-y: auto; height:15em; width:100%"> <table border="0" width="100%" height="16em" cellpadding="4.8" align="center"> <tr> <th>行政区划</th> <th>预警项目数</th> <th>已处置数</th> <th>未处置数</th> </tr> <tr> <td>杭州市</td> <td>216</td> <td>28</td> <td>2</td> </tr> <tr> <td>宁波市</td> <td>216</td> <td>28</td> <td>2</td> </tr> <tr> <td>湖州市</td> <td>216</td> <td>28</td> <td>2</td> </tr> <tr> <td>衢州市</td> <td>216</td> <td>28</td> <td>2</td> </tr> </table> </div> <style> table{ border-collapse:collapse; } table th{ color: #fff; font-size: 16px; height:20px; line-height: 20px; text-align: center; } table tr{ /* border: 1px solid red; */ color: rgb(220, 235, 251); height:40px; line-height: 40px; text-align: center; } table tr:nth-child(2n+3) td{ background: rgba(1, 154, 254, 0.1); //不同行换色 border: 1px solid red; } table td{ text-align: center; } </style>
时间: 2023-08-14 18:05:52 浏览: 61
我注意到您在代码中设置了表格样式和边框样式。我发现一个问题是,您在设置表格样式时使用了 `border-collapse: collapse;`,这会导致表格的边框合并在一起,使得 `table tr:nth-child(2n+3) td` 中的边框样式无法正常显示。
解决这个问题的方法是,将 `border-collapse` 属性设置为 `separate`,以便单独显示每个单元格的边框。请尝试将以下代码添加到您的样式中:
```css
table {
border-collapse: separate;
}
```
在添加了此代码后,您应该能够在 `table tr:nth-child(2n+3) td` 中正确显示边框样式了。如果还有其他问题,请随时告诉我。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <link href="style/myweb.css" rel="stylesheet" type="text/css"/> <style type="text/css"> </style> </head> <body> <div class="header">上</div> <div class="center">中</div> <div class="bottom">下</div> </body> <body> <div class="qwe">w</div> </body> </html>
你已经创建了一个简单的网页,并引入了外部CSS文件。现在我们来完善一下CSS样式。
首先,在`myweb.css`文件中,添加以下CSS代码:
```css
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.center {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.bottom {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.qwe {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
```
这段CSS代码定义了不同部分的样式,包括头部(header)、中间部分(center)、底部(bottom),以及额外的`qwe`类。
保存并运行你的网页,你将看到一个简单的网页,包含头部、中间和底部三个部分,以及额外添加的`qwe`部分。
记得在同一目录下创建名为 `style/myweb.css` 的CSS文件,并将上述CSS代码粘贴到该文件中。
希望这可以帮助你制作简单的网页!如有其他问题,请随时询问。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML+CSS进阶</title> <link rel="stylesheet" href="myweb.css"/> </head> <body> <div class="header"></div> <div class="center"></div> <div class="bottom"></div> </body> </html>
你已经创建了一个简单的网页框架。现在我们来完善一下CSS样式。
首先,在`myweb.css`文件中,添加以下CSS代码:
```css
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.center {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.bottom {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
这段CSS代码定义了不同部分的样式,包括头部(header)、中间部分(center)和底部(bottom)。
保存并运行你的网页,你将看到一个简单的网页,包含头部、中间和底部三个部分。
记得在同一目录下创建名为 `myweb.css` 的CSS文件,并将上述CSS代码粘贴到该文件中。
希望这可以帮助你制作简单的网页!如有其他问题,请随时询问。