html - 表格中的背景颜色不显示空单元格

Question

我有一张 table ，我在其中每隔一行给了一个灰色背景色。我如何在这里捕获空单元格？为什么这些没有在这个 css 中被捕获:

tr:nth-child(even) {
  background-color: #dddddd; 
}

做 td:empty 也不会捕获 block ，所以我有点难过。

这是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>

Answer 1

关于您的“错误”:它与 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>