表格中的背景颜色不显示空单元格
我有一张桌子，我为每隔一行赋予了灰色背景颜色。我如何捕获这里的空单元格？为什么这些没有被捕获在这个 css 中：
tr:nth-child(even) {
background-color: #dddddd;
}
执行 td:empty 也不会捕获块，所以我有点困惑。
这是 HTML
<td>
<tr>
<td colspan="2">
<input type="text" placeholder="Add new email" v-model="email" />
<img @click="addEmailToQ" src="@/assets/Plus.png" />
</td>
</tr>
<!-- <h2>Emails</h2> -->
<tr style="text-align: left" v-for="(email, key) in emailList" :key="key">
{{email}}
</tr>
</td>
蝴蝶不菲浏览 87回答 2
2回答
-
拉莫斯之舞
关于你的“错误”：它与CSS无关，你的标记完全是错误的。<tr>需要包含<td>，而不是相反。下面的示例代码：如果给出了正确的标记，空单元格将具有 CSS 给定的背景颜色。table { width:100%;}tr:nth-child(even) { background-color: #dddddd; }<table> <tr> <td>Row 1, Cell 1</td> <td></td> <td></td> </tr> <tr> <td>Row 2, Cell 1</td> <td></td> <td></td> </tr></table> -
侃侃尔雅
确保您包含<td>在所有单元格中，甚至是空单元格<td> </td>tr:nth-child(even) { background-color: #dddddd; }<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td></td> <td>Smith</td> <td></td> </tr> <tr> <td>Eve</td> <td></td> <td>94</td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td></td> <td>94</td> </tr> <tr> <td>Jill</td> <td></td> <td>50</td> </tr> <tr> <td>Eve</td> <td></td> <td>94</td> </tr> </table> </body></html>
随时随地看视频慕课网APP
相关分类
Html5