html css table if empty cell change row color

Question

I'm trying to make a table css that should change the row color if a cell in that row is empty
As far as I can see there is "empty":

<style type="text/css">
 td:empty {
  background-color: red;
    }
</style>

Is there a way to change all the row color and not just the cell?

This is my actual table style:

<style type="text/css">
    .tg {
        border-collapse: collapse;
        border-spacing: 0;
    }

        .tg td {
            font-family: Arial, sans-serif;
            font-size: 14px;
            padding: 10px 5px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            word-break: normal;
            border-color: black;
        }

        .tg th {
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: normal;
            padding: 10px 5px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            word-break: normal;
            border-color: black;
        }

        .tg .tg-yofg {
            background-color: #9aff99;
            text-align: left;
            vertical-align: top
        }

        .tg .tg-7od5 {
            background-color: #9aff99;
            border-color: inherit;
            text-align: left;
            vertical-align: top
        }

        .tg .tg-m9y7 {
            background-color: #ffffc7;
            text-align: left;
            vertical-align: top;
            border-left: 3px solid red;
        }

    @media screen and (max-width: 767px) {
        .tg {
            width: auto !important;
        }

            .tg col {
                width: auto !important;
            }

        .tg-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
</style>

My concern:

1. Does it exist?
2. IF yes: can I use it in my style?
3. If it exists but I cannot use it in my style, what should I change?

But mostly, as always when I try something out of my knowledge, is really this approach the best approach?

Just 2 lines as background:

I'm using python with jinja2 template to print an HTML table based on a python dictionary. I merge two dictonaries into one and then "jinja" it. It works, but I want to highlight the differences between them, the actual result:

|dict1-el1 | dict1-el2  |  dict2-el1 | dict2-el2|
|-----------------------------------------------| 
|  a       |    b      | |    a      |    b     |
|          |    f      | |    d      |    f     |
|  t       |    z      | |    t      |    z     |

I would like the second row highlighted This table has to be send by mail. the column of dict1 are already styled with a color and the columns of the dict2 with another (in my case I have 7 column per dict).
A very BAD solution I thought was to pass not only the values "a", "b", etc etc to jinja, but to store in the merged dictionary itself the syle css name. I can then use python to chose the cell color. But before this I wonder if a css solution could easily exists.

Please give priority to css question.

Thanks

Answer 1

In CSS is not possibile, in javascript you could loop over all the rows, look for any empty cell and, if found, apply a class on the row

var rows = document.querySelectorAll('tr');

[...rows].forEach((r) => {
   if (r.querySelectorAll('td:empty').length > 0) {
      r.classList.add('highlight');
   }
})

.highlight td {
   background: yellowgreen;
}

<table cellspacing="0">
   <tr>
      <td>1</td>
      <td></td>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
   </tr>
   <tr>
      <td>9</td>
      <td>10</td>
      <td></td>
      <td>12</td>
   </tr>
</table>