我有一张桌子，我为每隔一行赋予了灰色背景颜色。我如何捕获这里的空单元格？为什么这些没有被捕获在这个 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>
2 回答
拉莫斯之舞
TA贡献1820条经验 获得超10个赞
关于你的“错误”：它与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>
侃侃尔雅
TA贡献1801条经验 获得超16个赞
确保您包含<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>
- 2 回答
- 0 关注
- 86 浏览
添加回答
举报
0/150
提交
取消