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

标签 html css vue.js css-selectors background-color

Screenshot of the issue

我有一个表格,其中我为每隔一行赋予了灰色背景颜色。我如何捕获这里的空单元格?为什么这些没有被捕获在这个 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>

最佳答案

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

关于html - 表格中的背景颜色不显示空单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60866353/

相关文章:

javascript - 知道在 php 循环中点击了哪一行

html - 滚动时停止列表项 onclick 事件触发

HTML5 输入类型范围显示范围值

javascript - 使用干净的 Vue.js 进行表单验证

javascript - 当我通过 Vue Router 导航时,我丢失了元素的内容

javascript - Nuxt Js asyncData 返回值表现得很奇怪。

Python Beautiful Soup 网页抓取特定数字

html - Microsoft.com 上的下拉箭头

javascript - 搜索 Html 表格并在不刷新的情况下显示结果

html - 悬停时强制结束 CSS 过渡