html css表格如果空单元格更改行颜色

html css表格如果空单元格更改行颜色,html,css,Html,Css,我正在尝试创建一个表格css,如果该行中的单元格为空,则该表格css应更改该行的颜色 据我所知,这里是“空的”: td:空{ 背景色:红色; } 有没有办法改变所有行的颜色而不仅仅是单元格 这是我实际的桌子样式: .tg{ 边界塌陷:塌陷; 边界间距:0; } .tg td{ 字体系列:Arial,无衬线; 字体大小:14px; 填充:10px 5px; 边框样式:实心; 边框宽度:1px; 溢出:隐藏; 断字:正常; 边框颜色:黑色; } .tg th{ 字体系列:Arial,无衬线;

我正在尝试创建一个表格css,如果该行中的单元格为空,则该表格css应更改该行的颜色
据我所知,这里是“空的”:


td:空{
背景色:红色;
}
有没有办法改变所有行的颜色而不仅仅是单元格

这是我实际的桌子样式:


.tg{
边界塌陷:塌陷;
边界间距:0;
}
.tg td{
字体系列:Arial,无衬线;
字体大小:14px;
填充:10px 5px;
边框样式:实心;
边框宽度:1px;
溢出:隐藏;
断字:正常;
边框颜色:黑色;
}
.tg th{
字体系列:Arial,无衬线;
字体大小:14px;
字体大小:正常;
填充:10px 5px;
边框样式:实心;
边框宽度:1px;
溢出:隐藏;
断字:正常;
边框颜色:黑色;
}
.tg.tg yofg{
背景色:#9AF99;
文本对齐:左对齐;
垂直对齐:顶部
}
.tg.tg-7od5{
背景色:#9AF99;
边框颜色:继承;
文本对齐:左对齐;
垂直对齐:顶部
}
.tg.tg-m9y7{
背景色:#ffffc7;
文本对齐:左对齐;
垂直对齐:顶部;
左边框:3倍纯红;
}
@媒体屏幕和屏幕(最大宽度:767px){
.tg{
宽度:自动!重要;
}
.tg列{
宽度:自动!重要;
}
.tg包装{
溢出-x:自动;
-webkit溢出滚动:触摸;
}
}
我关注的是:

  • 它存在吗
  • 如果是:我可以用我的风格吗
  • 如果它存在,但我不能在我的风格中使用它,我应该改变什么
  • 但最重要的是,当我尝试我所知之外的东西时,这种方法真的是最好的方法吗

    只有两行作为背景:

    我正在使用python和jinja2模板打印基于python字典的HTML表。我把两个口述词合并成一个,然后“jinja”它。这是可行的,但我想强调它们之间的区别,实际结果是:

    |dict1-el1 | dict1-el2  |  dict2-el1 | dict2-el2|
    |-----------------------------------------------| 
    |  a       |    b      | |    a      |    b     |
    |          |    f      | |    d      |    f     |
    |  t       |    z      | |    t      |    z     |
    
    我想突出显示第二排 这张表必须邮寄。 dict1的列已经用一种颜色设置了样式,dict2的列用另一种颜色设置了样式(在我的例子中,每个dict有7列)。
    我认为一个非常糟糕的解决方案是不仅将值“A”、“b”等传递给jinja,而且将syle css名称存储在合并字典中。然后我可以使用python来选择单元格颜色。但在此之前,我想知道css解决方案是否容易存在

    请优先考虑css问题


    谢谢

    在CSS中是不可能的,在javascript中,您可以在所有行上循环,查找任何空单元格,如果找到,则在该行上应用一个类

    var rows=document.querySelectorAll('tr');
    […行].forEach((r)=>{
    if(r.querySelectorAll('td:empty')。长度>0){
    r、 添加('highlight');
    }
    })
    。突出显示td{
    背景:黄绿色;
    }
    
    1.
    3.
    4.
    5.
    6.
    7.
    8.
    9
    10
    12
    
    是否允许使用javascript方法?我喜欢这个问题,但据我所知,可能没有CSS唯一的方法可以做到这一点。Javascript是你最好的选择,我想。对不起,我写得太多(编辑抱怨我写了太多代码),我写了一个要求,这个表格应该放在电子邮件中。我认为javascript不会被接受。非常感谢您的努力,但是这个表应该通过邮件发送。我会尝试使用它。顺便说一句,主要问题的答案很清楚:我不能用css来做。再次感谢!