0

I've tried several combinations to try and select a parent row but nothing seems to work. Maybe it is not possible. If someone could help explain how to achieve this through either css or sass it would be much appreciated.

The goal is to add a gray background to a row, , if that row contains an empty column, .


I've tried some variations of the following: 

tr > td:empty {
  background-color: #f3f3f3;
}

Example

<table>
   <thead></thead>
   <tbody>
        <tr>
        <td>No</td>
        <td>empty</td>
        <td>cells</td>
        <td>here</td>
    </tr>
    <tr>
        <td>Does</td>
        <td>have</td>
        <td>empty</td>
        <td>cell</td>
        <td></td>
    </tr>
   </tbody>
   <tfoot></tfoot>
</table>
Nate Thompson
  • 325
  • 2
  • 12
  • Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Jon P Dec 13 '18 at 23:09

1 Answers1

2

There is not such selector to do this but you can simulate the effect using a pseudo element:

table {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

tr>td:empty {
  position: relative;
}

tr>td:empty::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -50vw;
  right: -50vw;
  bottom: 0;
  background-color: #f3f3f3;
}
<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>No</td>
      <td>empty</td>
      <td>cells</td>
      <td>here</td>
    </tr>
    <tr>
      <td>Does</td>
      <td>have</td>
      <td>empty</td>
      <td>cell</td>
      <td></td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>
<table>
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td>empty</td>
      <td>cells</td>
      <td></td>
      <td>here</td>
    </tr>
    <tr>
      <td>Does</td>
      <td>have</td>
      <td></td>
      <td>empty</td>
      <td>cell</td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • For some reason this only is working on my table's footer. I just realized my table has a thead, tbody, and tboot tag inside of the table tag. But I'd think it would work on any of those – Nate Thompson Dec 13 '18 at 23:24
  • @NateThompson it should work, probably it need some tweaking, can you share the full code? – Temani Afif Dec 13 '18 at 23:26
  • I do like this answer though. Very interesting. And unfortunately, due to security violations, I can't share the actual code as it is work related. So I can only show a dumbed down version. I did update my question though, although it's not much better than pre-edit. – Nate Thompson Dec 13 '18 at 23:29
  • @NateThompson I also update my code with your new one and it's working fine .. you have probably some CSS creating issue – Temani Afif Dec 13 '18 at 23:34