Background color in a table not displaying for empty cells

Question

I have a table, where I've given a gray background-color to every second row. How do I capture the empty cells here? And why aren't these being captured in this css:

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

Doing td:empty doesn't capture the blocks neither, so I'm a bit stumped.

Here's the 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

Regarding your "error": It has nothing to do with CSS, your markup is simply wrong. <tr> needs to enclose <td>, not the other way around.

Read up on HTML Tables here: https://www.w3schools.com/html/html_tables.asp

Sample code below: Empty cells will have the given background color with your CSS, if given the right markup.

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>