我有一张桌子,每隔两行给它一个灰色背景色。我如何在这里捕获空单元格?为什么不将这些捕获到此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>
答案 0 :(得分:2)
关于您的“错误”:与CSS无关,您的标记完全是错误的。 <tr>
需要包含<td>
,而不是相反。
在此处阅读HTML表格:https://www.w3schools.com/html/html_tables.asp
下面的示例代码:如果使用正确的标记,则空白单元格将具有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>
答案 1 :(得分:1)
确保在所有单元格中都包含<td>
,即使是空白的<td> </td>
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html lang="en">
<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>